功能：美化select 下拉列表

说明：因为IE不能通过css修改样式，所以需要通过javascript来修改，下面是一个成功的案例，自己再修改下样式就好了

 

Javascript代码：

 

<script type="text/javascript">

  function showAndHide(obj,types){

    var Layer=window.document.getElementById(obj);

    switch(types){

  case "show":

  document.getElementById("txt").blur();

    Layer.style.display="block";

  break;

  case "hide":

    Layer.style.display="none";

  break;

}

  }

  function getValue(obj,str){

    var input=window.document.getElementById(obj);

input.value=str;

  }

</script>

HTML代码：
 
<body>

 <input type="text" id="txt" name="txt"   value="中国CHINA" style="border:none; background:#fff; cursor:pointer; width:80px; "  >
   <!--列表1-->
   <div class="Menu" id="List1">
          <div class="Menu2">
            <ul>
          <li οnmοusedοwn="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
          <li οnmοusedοwn="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
           <li οnmοusedοwn="getValue('txt','美国USB');showAndHide('List1','hide');">美国USB</li>
            <li οnmοusedοwn="getValue('txt','美国USC');showAndHide('List1','hide');">美国USc</li>
        </ul>
      </div>
   </div>
   
   </body>
 

CSS代码：
 
<style type="text/css">
<!--

.Menu {
position:relative;
width:204px;
height:127px;
z-index:1;
background: #FFF;
border:1px solid #000;
margin-top:-100px;
display:none;
}
.Menu2 {
position: absolute;
left:0;
top:0;
width:100%;
height:auto;
overflow:hidden;
z-index:1;
}
.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
             border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
 change:expression(
  this.οnmοuseοver=function(){
    this.style.background="#F2F5EF";
  },
  this.οnmοuseοut=function(){
    this.style.background="";
  }
 )
}
input{width:200px}
#List1,{left:0px;top:93px;}
-->
</style>
 
-------------源代码已经共享，下载附件看吧