怎么用html5+js+css实现如图所示的搜索下拉框，谢谢

<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

html里可以用<select>标签设置下拉框。下面详细介绍其用法。

这是测试链接，可以参考本教程自己实 *** 网页链接。

1、<select>标签

<select>标签在HTML里面是下拉框，用户点一下可以选择里面的选项

2、<option>标签

<option>标签是<select>标签的选项，它有2个东西需要设置，分别是值value和文本显示。

例如这个opion

  <option value="0">请选择分类</option>

它的value是0，文本是"请选择分类"。

如果你在页面保存了一些信息，一般提交给服务器的时候提交的是它的value。

3、尝试编写例子

例如下面的代码，在html里面展示的效果如图

<select>

<option value="0">请选择分类</option>

<option value="1">美食/营养</option>

<option value="10">游戏/数码</option>

<option value="37">手工/爱好</option>

<option value="50">生活/家居</option>

<option value="73">健康/养生</option>

<option value="86">运动/户外</option>

<option value="93">职场/理财</option>

<option value="101">情感/交际</option>

<option value="108">母婴/教育</option>

<option value="123">时尚/美容</option>

</select>

<input type="text" class="aa" /><input type="button" value="search" />

.aa{width:100pxheight:20pxboder:solid 1px #f00}//定义搜索框的大小高度以及边框颜色。

思路是：

放大镜图标用个img写进来或者用其它标签用CSS做背景也可以；

下拉导航这种效果系统的Select下拉是最容易想到的，但是别想着用它做，，原因很简单，做不到的，，这个必须借助JS辅助来解决！

---