JS实现表单元件select美化

select 属于web开发中应用频率最高的元件之一了，但是若要重新定义它的样式却是一个十分令人头痛的问题，一般用CSS是无法让他改观的。试想，如果在一个网站设计精美的网站上放个select上去90%都会显得很不协调的。
为此，目前很多解决方案，都是放弃select，或者用javascript来模拟出一个select来。
今天较有心情，顺手花2个小时，自己弄了一个demo出来。
IE6/IE7/FF下测试通过

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Js Select 美化方案</title>
    <script type="text/javascript">    
    function funcInitSel(e){        
        var objUL = e.getElementsByTagName("ul")[0];
        document.onclick = function(){                
            if(e.getAttribute("state")=="0") objUL.style.display = "none";
        }
        var objTxt = e.getElementsByTagName("input")[0];
        var arrLi = objUL.getElementsByTagName("li");
        for(var i=0;i<arrLi.length;i++){
            arrLi[i].onmouseover = function(){
                this.className = "On";                
            }
            arrLi[i].onmouseout = function(){
                this.className = "";
            }
            arrLi[i].onclick = function(){
                objTxt.value = this.innerHTML;                
                e.setAttribute("state",0);
                objUL.style.display = "none";  
            }
        }
    }
    function funcSel(e){                 
         var objUL = e.getElementsByTagName("ul")[0];         
         if(objUL.style.display == "none" && e.getAttribute("state") == "1"){
            objUL.style.display = "";                    
         }
         if(e.offsetWidth > objUL.offsetWidth){
            objUL.style.width=e.offsetWidth-2 + "px";            
         }         
    }
    function funcSetOn(e,v){  
        if(e.getAttribute("state") == ""){
            funcInitSel(e);                                   
        }
        e.setAttribute("state",v);        
    }
    
    </script>
    <link href="css/front.css" rel="stylesheet" type="text/css" />
</head>
<body>        
  <div class="SelectControl" onmouseover="funcSetOn(this,1)" onmouseout="funcSetOn(this,0)" onclick="funcSel(this)" state="">
    <p><img src="images/ico_arrow.gif" /><input readonly="readonly" value="请选择" /></p>
    <ul style="display:none;">
      <li>新闻时事</li>
      <li>财经动态</li>
      <li>娱乐休闲</li>
    </ul>
  </div>
</body>
</html>

演示地址:
http://demo.chenreal.com/select/

换迎各界朋友提供意见和建议