提示：您可以先修改部分代碼再運行
<style type="text/css"><!-- *{padding:0; margin:0;} ul{list-style:none; margin:10px 30px; position:relative; font-family:"宋體";} ul li{position:relative; width:202px;height:22px; } .text{width:200px; height:20px; position:absolute; left:0; top:0;border:1px solid #ccc; line-height:20px; font-size:14px; cursor:default;} .btn{position:absolute;width:17px; height:20px; right:1px; top:1px; display:inline-block; background:url(yun_qi_img/20100819181001.jpg) no-repeat;} .btnhover{background:urlyun_qi_img/20100819181122.jpg);} .select{border:1px solid #666;width:199px; height:auto; position:absolute; top:21px; display:none;background:#fff;} .select p{line-height:16px; font-size:13px; cursor:default; position:relative;} .select .hover{background:#3399FD;} --></style> <h2>瀏覽器預設樣式</h2> <p> <select ><option>select1</option><option>select2</option><option>select3</option><option>select4</option></select></p> <h2>js類比select,樣式主要參照IE8與Firefox。</h2> <ul> <li><input type="text" class="text" onclick="beginSelect(this);" /><span class="btn" onmousedown="beginSelect(this)"> </span></li> <li class="select"> <p>select1</p> <p>select2</p> <p>select3</p> <p>select4</p> </li> </ul> <p>在不改變HTML結構的前提下，可更改其它樣式。建議用IE8與FF瀏覽，可與預設樣式進行對比。</p> <script type="text/javascript">// <![CDATA[ function beginSelect(elem){ if(elem.className == "btn"){ elem.className = "btn btnhover" elem.onmouseup = function(){ this.className = "btn" } } var ul = elem.parentNode.parentNode; var li = ul.getElementsByTagName("li"); var selectArea = li[li.length-1]; if(selectArea.style.display == "block"){ selectArea.style.display = "none"; } else{ selectArea.style.display = "block"; mouseoverBg(selectArea); } } function mouseoverBg(elem1){ var input = elem1.parentNode.getElementsByTagName("input")[0]; var p = elem1.getElementsByTagName("p"); var pLength = p.length; for(var i = 0; i < pLength; i++){ p[i].onmouseover = showBg; p[i].onmouseout = showBg; p[i].onclick = postText; } function showBg(){ this.className == "hover"?this.className = " ":this.className = "hover"; } function postText(){ var selected = this.innerHTML; input.setAttribute("value",selected); elem1.style.display = "none"; } } // ]]></script>
提示：您可以先修改部分代碼再運行
