Js CSS随手模拟的select下拉选择框

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<title>JS css模仿select</title>
<style>
.zselect{width:500px;height:50px;line-height:50px;border:1px solid #ccc;position: relative;}
.zselect ul{width:100%;list-style: none;margin: 0px;padding: 0px;position: absolute;z-index: 999;border: 1px solid #ccc;background: #fff;}
.zselect ul li{width:100%;height:50px;line-height:50px;text-align:center;margin: 2px 0px;background: #CCC; display: none; cursor: pointer;}
.zselect ul li:hover{background: #666;}
.zselect ul li.on{display: block; }
</style>
<div class="zselect">
	<ul>
		<li class="on">请选择编程语言</li>
		<li>Visual C#</li>
		<li>Visual Basic</li>
		<li>PHP</li>
		<li>Foxpro</li>
		<li>易语言</li>
	</ul>
</div>
<script>
	var lis = document.getElementsByClassName('zselect')[0].getElementsByTagName('li');
	for(var i = 0; i < lis.length; i++){
		lis[i].onclick = function(){
			if(this.parentNode.getAttribute('_zxs') == 'show'){
				//for(var j = 0; j < lis.length; j++){ lis[j].className = '';}
				for(var j = 0; j < lis.length; j++){ lis[j].style.display = 'none';}
				this.className = 'on';
				this.style.display = 'block';
				this.parentNode.setAttribute('_zxs','hide');
			}else{
				//for(var j = 0; j < lis.length; j++){ lis[j].className = 'on';}
				for(var j = 0; j < lis.length; j++){ lis[j].style.display = 'block';}
				this.parentNode.setAttribute('_zxs','show');
			}
		};
	}
</script>

AخA
 
<title>JS css模仿select</title>
<style>
.zselect{width:500px;height:50px;line-height:50px;border:1px solid #ccc;position: relative;}
.zselect ul{width:100%;list-style: none;margin: 0px;padding: 0px;position: absolute;z-index: 999;border: 1px solid #ccc;background: #fff;}
.zselect ul li{width:100%;height:50px;line-height:50px;text-align:center;margin: 2px 0px;background: #CCC; display: none; cursor: pointer;}
.zselect ul li:hover{background: #666;}
.zselect ul li.on{display: block; }
</style>
<div class="zselect">
    <ul>
        <li class="on">请选择编程语言</li>
        <li>Visual C#</li>
        <li>Visual Basic</li>
        <li>PHP</li>
        <li>Foxpro</li>

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

Js CSS随手模拟的select下拉选择框

分类

网站常用

描述

JavaScript 与CSS共同模拟实现的Select下拉框，选择值以后自动显示，但这种样式要比网页中固有的Select更灵活，可以很好的美化，喜欢的就拿去自己美化一下，整体很不错的。