javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:主页 > WEB前端 > CSS-HTML >

CSS+JS实现模拟select样式效果

来源:IT技术网编辑:一页书发布于:2013-06-17人围观CSSJSSELECT样式

对于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;



 

CSS,JS,SELECT,相关的文章
有时间的话来看看IT界的突发事件