然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。
在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。
下面是示例代码：
<form action="">
<input type="text" list="url_list" name="text" />
<input type="submit" />
</form>
<datalist id="url_list">
<option label="HZ赫兹工作室" value="http://weibo.com/hz421247910" />
<option label="提示1" value="列表项1" />
<option label="提示2" value="列表项2" />
<option label="" value="列表项3" />
</datalist>
HTML5之前一般使用select标签或者div+js实现
1、首先打开HTML5软件，并登陆自己的个人账户。2、其次点击要设置的文件，并点击选中元素，选择下拉框。
3、最后在选项栏中，点击放置，选择呢放置到标题下即可。
<div class="searchModel">
<select name="" id="" value="2">
<option value="0">科室</option>
<option value="1">疾病</option>
<option value="2">医院</option>
</select>
<input type="text" placeholder="请输入搜索内容">
<button>搜索</button>
</div>
<style>
html,
body,
div,
input,
select,
button {
margin: 0
padding: 0
border: none
outline: none
}
.searchModel {
display: flex
border: 1px solid orange
border-radius: 4px
overflow: hidden
margin: 20px
height: 44px
}
.searchModel select {
color: #fff
background: orange
padding: 0 22px
/* appearance: none */
/* -moz-appearance: none */
/* Firefox */
/* -webkit-appearance: none */
/* Safari 和 Chrome */
}
select::-ms-expand {display: none}
.searchModel select option{
color: #333
background: #fff
}
.searchModel input {
flex: 1
padding: 0 10px
}
.searchModel button {
width: 44px
color: #fff
background: orange
}
</style>
要改变下拉选项选中的样式，就用div去模拟下拉框
js部分，button提交表单，或者是div模拟提交ajax
