1.第一种自定义下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;list-style: none;}
.selectOption{width:200px;height:30px;line-height: 30px;border:1px solid #ccc;margin:100px auto;overflow:hidden;}
.selectOption ul{}
.selectOption ul li{text-align: center;}
.selectOption ul li:hover{width:100%;background:yellow;}
.selectText{border:none;outline: none;text-align: center;width:100%;}
</style>
</head>
<body>
<div class="selectOption">
<input type="text" class="selectText" name="" value="--选项--" readonly=""></input>
<ul>
<li>下拉选项1</li>
<li>下拉选项2</li>
<li>下拉选项3</li>
<li>下拉选项4</li>
</ul>
</div>
<script type="text/javascript">
var selectOption = document.querySelector(".selectOption");//select
var selectText = document.querySelector(".selectText");//文本框
var selectOptionList = selectOption.children[1].children;
selectOption.onclick = function(e){//点击select选项
e.stopPropagation();
selectOption.style.overflow = "visible";//显示
}
document.onclick = function()
{
selectOption.style.overflow = "hidden";//隐藏
}
for(var i = 0; i < selectOptionList.length; i++)
{
selectOptionList[i].index = i;
selectOptionList[i].onclick = function(e)//select下拉选项
{
selectText.value = selectOptionList[this.index].innerHTML;//获得选中选项
e.stopPropagation();
selectOption.style.overflow = "hidden";//隐藏
}
}
</script>
</body>
</html>
2.第二种自定义下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;list-style: none;}
.selectBox{width:200px;height:35px;margin:150px auto;border:1px solid #ccc;}
.selectOption{position: absolute;}
.selectKuang{width:200px;height:35px;overflow:hidden;position:relative;}
.selectKuang::before{content:"";position:absolute;top:13.5px;right:12px;z-index: 10;width:0;height:0;border:8px solid transparent;border-top:8px solid #28333f;}
.selectKuang ul li {padding-left:10px;height:35px;line-height: 35px;background:orange;}
.selectKuang ul li:hover{background:red;}
.selectSpan{padding-left:10px;height:35px;line-height: 35px;background:#fff;}
</style>
</head>
<body>
<div class="selectBox">
<select name="" class="selectOption">
<option value="选项">选项</option>
<option value="选项1">选项1</option>
<option value="选项2" selected>选项2</option>
<option value="选项3">选项3</option>
</select>
<div class=&#