问题描述:
就像文本输入框<input>样式改变一样 我要改变的是<select><option></option></select>标签下拉框的样式 另外补充一点 我不要作成模拟下拉框 不要看且麻烦（除非你有很简单的模拟下拉框~HOHO~）谢谢大家！对不起，上次我问错了地方，现在只有这6分了
解析:
例一：
＜select name=select size="1" class="page_speeder_1165166956"＞
＜option value="2" selected＞yesky＜/option＞
＜option value="1"＞redidea＜/option＞
＜/select＞
查一下手册,还有好多项可以设置.
例二：
<>
<head>
<style>
.box
{
border: 1px solid #C0C0C0
width: 182px
height: 20px
clip: rect( 0px, 181px, 20px, 0px )
overflow: hidden
}
.box2
{
border: 1px solid #F4F4F4
width: 180px
height: 18px
clip: rect( 0px, 179px, 18px, 0px )
overflow: hidden
}
select
{
position: relative
left: -2px
top: -2px
width: 183px
line-height: 14pxcolor: #909993
border-style: none
border-width: 0px
}
</style>
</head>
<body>
<div class = box><div class = box2>
<select size = "1" name = "D1">
<option>内容一</option>
<option>内容二</option>
</select>
</div></div>
</body>
</>
以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。
第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。
未显示时属性为（ display: none）显示时属性为（display: block），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通...
除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden 来实现。
list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。
同样是通过overflow: hidden实现隐藏，但是是通过visibility:visible显示隐藏，动画效果仍然有效。
就是相比方法二将hover里面的属性由display: block改为visibility:visible
以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。
比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden和visibility:visible实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。
<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
