功能：美化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 onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
<li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
<li onmousedown="getValue('txt','美国USB');showAndHide('List1','hide');">美国USB</li>
<li onmousedown="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.onmouseover=function(){
this.style.background="#F2F5EF";
},
this.onmouseout=function(){
this.style.background="";
}
)
}
input{width:200px}
#List1,{left:0px;top:93px;}
-->
</style>
-------------源代码已经共享，下载附件看吧
