位置：首页>> 网络编程>> JavaScript>> Select下拉列表控件美化

Select下拉列表控件美化

作者：biyuan　来源：biyuan's blog　发布时间：2008-11-12 12:55:00　

标签：Select,美化,下拉列表

顽固的Select下拉列表，一般很难用css来控制样式

下面使用了js来美化select

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Select控件美化 - asp之家 - www.aspxhome.com</title><style type="text/css">.Select_txt { background:#383931 url(select.gif) no-repeat right; font-size:12px; height:20px; line-height:20px; position:relative; z-index:1; text-indent:0.3em; border:1px solid #171814; cursor:default; color:#878884; text-align:left;}.Select_list { background:#383931; font-size:12px; position:absolute; z-index:2; text-indent:0.3em; border:1px solid #171814; line-height:20px; cursor:default; color:#878884; text-align:left;}.Select_list_over { background:#1A1B17;}.Select_list_out { background:#383931; position:relative; z-index:10;}select { position:relative; top:0px; left:0px;}</style><script language="JavaScript">function $(str){ return document.getElementById(str);}function addEvent() { if (!document.all){ arguments[0].addEventListener(arguments[1], arguments[2], false); } else { arguments[0].attachEvent("on" + arguments[1], arguments[2]); }}function delEvent() { if (!document.all){ arguments[0].removeEventListener(arguments[1], arguments[2], false); } else { arguments[0].detachEvent("on" + arguments[1], arguments[2]); }}function changeIndex(s, t){ $(t).selectedIndex = s; $("_select_" + t).innerHTML = $(t).options[$(t).selectedIndex].innerHTML; $("_select_txt_" + t).style.display = "none"; if($(t).onchange){ $(t).onchange(); }}function selectLoad(){ var sels = document.getElementsByTagName("select"); for(var i = 0; i < sels.length; i ++){ var txt = document.createElement("div"); txt.className = "Select_txt"; txt.style.width = sels[i].offsetWidth + "px"; txt.innerHTML = sels[i].options[sels[i].selectedIndex].innerHTML; txt.id = "_select_" + sels[i].id; var _txt = document.createElement("div"); _txt.className = "Select_list"; _txt.style.width = txt.style.width; _txt.style.top = sels[i].offsetTop + 20 + "px"; _txt.style.left = sels[i].offsetLeft + "px"; _txt.id = "_select_txt_" + sels[i].id; var ops = sels[i].options; for(var k = 0; k < ops.length; k ++){ _txt.innerHTML += "<div onmouseover=\"this.className='Select_list_over'\" onmouseout=\"this.className='Select_list_out'\" onclick=\"changeIndex(" + k + ", '" + sels[i].id + "')\">" + ops[k].innerHTML + "</div>"; } _txt.style.display = "none"; document.body.appendChild(_txt); txt.onclick = new Function("$('_select_txt_" + sels[i].id + "').style.display=$('_select_txt_" + sels[i].id + "').style.display=='block'?'none':'block';"); sels[i].parentNode.insertBefore(txt, sels[i].nextSibling); sels[i].style.display = "none"; }}addEvent(window, "load", selectLoad);</script></head><body><form><table border="0"><tr><td> <select onchange="alert(value)" id="select1"> <option value="1">选项1</option> <option value="2" selected>选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="我就是我">选项</option> </select></td></tr><tr><td> <select onchange="alert(value)" id="select2"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">这个选项再长点</option> </select></td></tr></table></form></body></html>

投稿

Select下拉列表控件美化

猜你喜欢