Tip: you can modify some code before running
<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> <p>Default Browser style</p> <p> <select ><option>Select1</option><option>Select2</option><option>Select3</option><option>Select4</option></select></p> <p>Js simulates the select statement. For the style, refer to IE8 and Firefox.</p> <ul> <li><input type="text" class="text" onclick="beginSelect(this);" /> </li> <li class="select"> <p>Select1</p> <p>Select2</p> <p>Select3</p> <p>Select4</p> </li> </ul> <p>You can change other styles without changing the HTML structure. We recommend that you use IE8 and FF for browsing, which can be compared with the default style.</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>
Tip: you can modify some code before running
