select下拉框在IE和火狐下樣式問題
阿新 • • 發佈：2019-01-10
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>custom js select</title> <style type="text/css"> * { margin:0;padding:0;border:0 none;font-family:arial,helvetica,sans-serif;} body { padding:10px;} #current,#options { border:1px solid #999;} #replace {cursor:default;overflow:visible;position:relative;} #current { background:url("http://lab.aspektas.com/select/dropdown.png") right center no-repeat;margin-bottom:0;} #current,#replace,#options li { width:300px;} #options { border-top:0 none; display:none;list-style-type:none;margin-top:0;position:absolute;width:310px;} #current,#options li {padding:5px;} #current,#options,#options li {background-color:#FFF;} </style> </head> <body> <form> <select id="select"> <option>請選擇一項</option> <option value="1">選項一</option> <option value="2">選項二</option> <option value="3">選項三</option> </select> <div id="replace"> <div id="current">請選擇一項</div> <ul id="options"> <li rel="1">選項一</li> <li rel="2">選項二</li> <li rel="3">選項三</li> </ul> </div> </form> <script type="text/javascript"> function getEle(id){ return document.getElementById(id); } window.onload = function(){ var i; getEle("select").style.display = "none"; getEle("replace").style.display = "block"; lis = getEle("options").getElementsByTagName("li"); for(i=0,len = lis.length;i<len;i++){ lis[i].onclick = function(){ getEle("select").value = this.getAttribute("rel"); getEle("options").style.display = "none"; getEle("current").innerHTML = this.innerHTML; } lis[i].onmouseover = function(){this.style.backgroundColor = "#DEDEDE";} lis[i].onmouseout = function(){this.style.backgroundColor = "transparent";} } getEle("replace").onmouseover = function(){ getEle("options").style.display = "block"; } getEle("replace").onmouseout = function(){ getEle("options").style.display = "none"; } } </script> </body> </html>