js+css模拟自定义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://img.jb200.com/img/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>

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;