option不能设置高度和样式，封装一个下拉列表替换select和option
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.divInput{
200px;
height: 40px;
line-height: 40px;
margin: 100px auto;
}
.inputBox{
100%;
height: 100%;
border: 1px solid #cccccc;
position: relative;
}
.inputBox div{
100%;
padding: 0 10px;
box-sizing: border-box;
}
.inputBox img{
position: absolute;
right: 34px;
top: 48%;
}
.list{
100%;
border: 1px solid #cccccc;
box-shadow: 0 0 10px #999;
}
.list ul{
padding: 0;
margin: 0;
}
.list ul li{
padding-left: 10px;
list-style: none;
100%;
height: 30px;
line-height: 30px;
cursor: pointer;
box-sizing: border-box;
}
.list ul li:first-child{
color: #999;
}
.list ul li.active{
background-color: #226ebc;
color: #fff;
}
.list ul li:hover{
background-color: #226ebc;
color: #fff;
}
</style>
</head>
<body>
// chooseGender 是灵活添加的类名，用于调用js，当页面多处需要使用下拉列表，这个类名不一样
<div class="divInput chooseGender">
<div class="inputBox">
<div>筛选实验类型</div>
<img src="../assets/arrow.png" alt=""> // 下拉图片
</div>
<div class="list" style="display: none;">
<ul>
<li>请选择</li>
<li>男</li>
<li>女</li>
</ul>
</div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function xiaLaChooseItem(jQueryTag){
jQueryTag.parent().css({
position: 'relative'
})
jQueryTag.find('.inputBox').click(function () {
if (jQueryTag.find('.list:hidden')[0] === undefined) {
jQueryTag.find('.list').hide()
} else {
jQueryTag.find('.list').show()
}
})
jQueryTag.find('.list>ul>li').click(function () {
var value = $(this).text()
jQueryTag.find('.inputBox>div').text(value)
$(this).addClass('active').siblings().removeClass('active')
jQueryTag.find('.list').hide()
})
}
xiaLaChooseItem($('.chooseGender'))
</script>
</body>
</html>