首页 > 代码库 > 利用css+js制作下拉列表

利用css+js制作下拉列表

2024-08-29 04:27:59   221人阅读

利用文本框来制作，可以不影响给后台传数据。
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0; padding:0; border:0;}
body{font-family:"微软雅黑";}
.in{width:150px; height:30px; cursor:pointer; position:relative;}
.in .choose{width:120px; height:30px; line-height:30px; text-align:center; float:left; background:#ff9933; cursor:pointer;}
.in b{width:30px; height:30px; float:left; position:relative; background:#cc6600;} 
.in b:after {content:""; width:0; height:0; border-width:10px; border-style:solid; border-color:#fff transparent transparent; position:absolute; right:5px; top:10px;}

.select{width:150px; height:150px; position:absolute; top:100%; display:none;}
.select li{display:block; width:150px; height:30px; line-height:30px; text-align:center; color:#3333cc; cursor:pointer; letter-spacing:5px; background:#ffff33;}
.select li:hover{background:#ff9933;}

.submit{width:80px; height:30px; margin-top:20px; border-radius:5px; background:-webkit-linear-gradient(top,#ffcc33,#ffff33); cursor:pointer; background:-moz-linear-gradient(top,#ffcc33,#ffff33); background:-ms-linear-gradient(top,#ffcc33,#ffff33); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="#ffffcc33",endcolorstr="#ffffff33");}
.submit:active{background:-webkit-linear-gradient(top,#ffff33,#ffcc33); background:-moz-linear-gradient(top,#ffff33,#ffcc33); background:-ms-linear-gradient(top,#ffff33,#ffcc33); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="#ffffff33",endcolorstr="#ffffcc33");}
</style>
</head>
<body>
<form action="receive.php" method="get">
<div class="in"><input type="text" id="choose" class="choose" name="choose" value="http://www.mamicode.com/-----请选择-----" readonly="readonly" /><b></b>
<ul class="select">
<li>选择一</li>
<li>选择二</li>
<li>选择三</li>
<li>选择四</li>
<li>选择五</li>
</ul>
</div>
<input type="submit" class="submit" value="http://www.mamicode.com/提交" />
</form>
<script>
var chose = document.getElementById(‘choose‘);
var wrap = document.querySelector(‘.in‘);
var sel = document.querySelector(‘.select‘);
var lis = sel.getElementsByTagName(‘li‘);
alert(lis.length);
wrap.onmouseover = function(){
sel.style.display = "block";
}
wrap.onmouseout = function(){
sel.style.display = "none";
}
for(var i=0,l=lis.length; i<l; i++){
lis[i].onclick = function(){
chose.value = http://www.mamicode.com/this.innerHTML;"none";
}
}

</script>
</body>
</html>

 

利用css+js制作下拉列表


联系
我们