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