<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:
<!DOCTYPE html><html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<ul>
<li class="dropdown">
<a id="a" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a>
<div class="dropdown-content" id="dropdown-a">
<a href="#">下拉 1</a>
<a href="#">下拉 2</a>
<a href="#">下拉 3</a>
</div>
</li>
<li class="dropdown">
<a id="b" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a>
<div class="dropdown-content" id="dropdown-b">
<a href="#">下拉 1</a>
<a href="#">下拉 2</a>
<a href="#">下拉 3</a>
</div>
</li>
</ul>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
body {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}
ul {
list-style-type: none
margin: 0
padding: 0
overflow: hidden
background-color: #333
}
li {
float: left
}
li a, .dropbtn {
display: inline-block
color: white
text-align: center
padding: 14px 16px
text-decoration: none
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #1f75cf
}
li.dropdown {
display: inline-block
}
.dropdown-content {
display: none
position: absolute
background-color: #fafafa
min-width: 160px
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}
.dropdown-content a {
color: black
padding: 12px 16px
text-decoration: none
display: block
text-align: left
}
.dropdown-content a:hover {
color: white
background-color: #1f75cf
}
.show {
display: block
}
JavaScript (script.js):
function showList(o) {hideList("dropdown-content" + o.id)
document.getElementById("dropdown-" + o.id).classList.toggle("show")
}
function hideList(option) {
var dropdowns = document.getElementsByClassName("dropdown-content")
for (var i = 0 i < dropdowns.length i++) {
var openDropdown = dropdowns[i]
if (openDropdown.id != option) {
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show')
}
}
}
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideList("")
}
}
点击标题 A：
点击标题 B：
JSFiddle 调试：jsfiddle.net/soL73u4y/2/
HTML中做一个可以输入的下拉框，需要用户添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置我们文本框的相关属性即可。具体操作步骤如下。
1、添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，这里需要几个选项就设置几个标签。如下图所示。
2、将下拉菜单需要显示的每一个内容设置在option标签中，如图所示，预览的设置效果，在网页中我们可以看到一个下拉菜单。如下图所示。
3、有时候下拉菜单也需要设置一个默认的值，如果大部分内容都是相同的，可以将它设置为默认值，只需要在它相应的属性中设置为选中状态。如下图所示。
4、再次预览我们的网页，可以看到刚才设置checked的选项已经默认显示在了设置的下拉菜单中选中状态。如下图所以。
5、设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置文本框的相关属性。如下图所示。
6、最后，可输入下拉框制作完成。如下图所示。
注意事项：
HTML中做一个可以输入的下拉框按照上述步骤操作即可制作完成。
