<!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>