简单js+css实现模拟自定义select样式 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> 简单js+css实现模拟自定义select样式

简单js+css实现模拟自定义select样式

浏览:4416次出处信息

简单js加css模拟select样式

对于select这个标签在各个浏览器下的显示样式都不相同，这就给设计师和前端开发者带来了极大的不方便。所以做出一个统一的样式的select样式是最直接的需求。

那么如何实现不同的浏览器下，有着相同样式的select呢？

下面看下本人的方法：

该方法主要用到的是js+css，代码量小，无插件
自定义select的样式
兼容性方面嘛，ie6可以无视了。

实现原理：（js+css模拟select样式）

将select的标签元素，设置opacity:0隐藏掉，并给其设置z-index将其移动到最上层。这样在点击外围box的时候，实际上是点击了select。

然后通过select的onchange事件，将选中的数据赋值到span元素中显示出来。

ie6下只会显示一个默认的select选择样式

废话不多说，看演示代码：

<div class="sel_wrap" id="sel_wrap">
	<span>请从下面选择</span>
	<select class="select" name="" id="c_select">
		<option value="0">牛魔王的世界观</option>
		<option value="1">专注于web前端开发</option>
		<option value="2">欢迎多多交流</option>
	</select>
</div>
<style>
.sel_wrap{width:300px;height:26px;
background:#fafafa url(http://images.niumowang.org/wp-content/uploads/2012/04/select.png) 
no-repeat right center;border:1px solid #ccc;border-radius:4px;cursor:pointer;
position:relative;_filter:alpha(opacity=0);}
.sel_wrap span{line-height:26px;padding-left:10px;font-size:13px;z-index:2;}
.sel_wrap .select{width:300px;height:28px;z-index:4;position:absolute;top:0;
left:0;margin:0;padding:0;opacity:0;cursor:pointer;}
</style>
<script>
	function $(x){
		return document.getElementById(x);
	}
	var sel=$("c_select");
	var wrap=$("sel_wrap");
	var result=wrap.getElementsByTagName("span");
	wrap.onmouseover=function(){
		this.style.backgroundColor="#fff";
	}
	wrap.onmouseout=function(){
		this.style.backgroundColor="#fafafa";
	}
	sel.onchange=function(){
		var opt=this.getElementsByTagName("option");
		var len=opt.length;
		for(i=0;i<len;i++){
			if(opt[i].selected==true){
				x=opt[i].innerHTML;
			}
		}
		result[0].innerHTML=x;
	}
</script>

注：如果想要获取返回的是选中的option的value值，那么将下面代码

var opt=this.getElementsByTagName("option");
var len=opt.length;
for(i=0;i<len;i++){
if(opt[i].selected==true){
x=opt[i].innerHTML;
}
}

替换成：

var x=this.vaue;

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：jquery实现无限滚动瀑布流实现原理

后一篇：ie下iframe输入框焦点丢失解决方案 >>

文章信息

作者：痞子来源：牛魔王的世界观
标签： select
发布时间：2012-09-10 23:29:05

建议继续学习

近3天十大热文