技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 简单js+css实现模拟自定义select样式

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

浏览:4425次  出处信息

简单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;

建议继续学习:

  1. 学习libevent的select模型    (阅读:3870)
  2. 关于JS获取select的值    (阅读:3183)
  3. InnoDB select性能拐点测试    (阅读:2862)
  4. 用 Jquery 模拟 select    (阅读:2737)
  5. IE6下select下拉框不能随滚动条正常滚动    (阅读:1956)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1