HTML里select的CSS样式的改变

本以为可以很简单的在CSS里像input那样的给解决，结果没想到试了一下才知道常规的CSS根本没法改变的select样式，CSS里怎么弄，select都仍然是默认的那三维的样式。于是在网上搜索了一下，才知道，原来这个select是不能用常规的方法来定义CSS样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题，于是找了一篇不错的文章转过来，希望对大家有帮助————

首先要告诉大家，如果你是用css的方法，除了箭头部分，其他都可以改变，这是很令人别扭的事，因为其他的样式改了，箭头部分改不了等于无用。
下面举个css改select的例子

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
如果你想彻底的改变select的样子，有一种方法是用htc，但它有个缺点就是除了ie内核的，其他的他不支持。
举个例子，下载地址如下：下载文件

下载此文件
第二种方法就是用js，这其实是模拟select的效果，代码如下：

<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px} .td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;} .td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px} .slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;} .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold; } .seldiv{ position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000; SCROLLBAR-FACE-COLOR: #d0dff7; SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;} </style> <script language="JavaScript"> document.onclick=hiddenDiv; function getDivCount（） { var arr=document.all; re=0; for （i=0;i200）{ sv.style.pixelHeight=200; sv.style.overflowY="scroll"; } else { sv.style.pixelHeight=da.offsetHeight; sv.style.overflowY="hidden"; } } function dropDown（ID）{ var sv=document.all["ZfDiv_"+ID] var tb=document.all["ZfData_"+ID] if（sv.style.display=="none"）{ sv.style.display=""; for（i=0;i<tb.rows.length;i++）tb.rows[i].style.display="" getPosition（ID）; } else { sv.style.display="none"; } }//下拉摸拟层 function hiddenDiv（）{ var o=window.event.srcElement.id; var tb var sv if（o==""） { for （j=0;j<getDivCount（）;j++） { tb=document.getElementById（"ZfData_"+j）; sv=document.getElementById（"ZfDiv_"+j）; for（i=0;i<tb.rows.length;i++） tb.rows[i].style.display=""; sv.style.display="none"; } } }//隐藏模拟层 function setValue（obj）{ var i=getI（obj.parentElement.parentElement.parentElement.id）; //alert（obj.parentElement.parentElement.parentElement.id）; var sl=document.all["ZfText_"+i]; var sv=document.all["ZfDiv_"+i]; sl.value=obj.innerText; sv.style.display="none"; //sldIndex=obj.parentElement.rowIndex; }//给文本框赋值 function over（obj）{ obj.className="td_over" obj.title=obj.innerText obj.focus（）; }//鼠标经过变色 function out（obj）{ obj.className="td_out" }//鼠标离开还原 function String.prototype.Trim（）{return this.replace（/（^s*）|（s*$）/g,""）}//自定义去空格函数Trim（） //增加list的接口,ID表示该组控件是页面中的第几个 function add（v,ID）{ var sv=document.all["ZfDiv_"+ID]; if（！v.Trim（））{return;} var tb=document.all["ZfData_"+ID]; var c=tb.insertRow（tb.rows.length）.insertCell（）; c.innerHTML="<nobr>"+v.Trim（）+"</nobr>"; c.onmouseover=new Function（"over（this）"）; c.onmouseout=new Function（"out（this）"）; c.onclick=new Function（"setValue（this）"）; c.className="td_out"; v=""; } //增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空 function addText（name,DefValue） { var i=getDivCount（）; document.write（"<span id="ZfSpan_"+i+"" style="border:1 solid #9CA0CB">"）; document.write（"<input type="text" value=""+DefValue+"" name=""+name+"" id="ZfText_"+i+"" ondblclick="ZfDrop_"+i+".click（）" class="slv" onmouseover="select_edit（this）"onkeyup="checkValue（"+i+"）"><input type=button id="ZfDrop_"+i+"" value=">" onclick="this.hideFocus=true;dropDown（"+i+"）;" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=""" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor="""></span>"）; document.write（"<table id="ZfData_"+i+"" onselectstart="return false" border="0"cellspacing="0" cellpadding="0" class="table1"></table>"）; } </script> </head> <body> <script language="JavaScript"> addText（"name1","a"）; add（"1234",0）; add（"1234",0）; addText（"name1","a"）; add（"1234",1）; add（"1234",1）; </script><style> .select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;} .selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;} .selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;} .option{font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;} .dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;} .select .button{width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;} </style> <script type="text/javascript"> var overOptionCss = "background: highlight; color: highlighttext"; var sizedBorderCss = "2 inset buttonhighlight"; var globalSelect; var ie4 = （document.all ！= null）; var q = 0; function initSelectBox（el） { copySelected（el）; var size = el.getAttribute（"size"）; el.options = el.children[1].children; el.selectedIndex = findSelected（el）; el.remove = new Function（"i", "int_remove（this,i）"）; el.item = new Function（"i", "return this.options[i]"）; el.add= new Function（"e", "i", "int_add（this, e, i）"）; el.options[el.selectedIndex].selected = true; dropdown = el.children[1]; if （size ！= null） { if （size > 1） { el.size = size; dropdown.style.zIndex = 0; initSized（el）; } else { el.size = 1; dropdown.style.zIndex = 99; if （dropdown.offsetHeight > 200） { dropdown.style.height = "200"; dropdown.style.overflow = "auto"; } } } highlightSelected（el,true）; } function int_remove（el,i） { if （el.options[i] ！= null） el.options[i].outerHTML = ""; } function int_add（el, e, i） { var html = ""; if （e.text ！= null） html += e.text; html += "" if （（i == null） || （i >= el.options.length）） i = el.options.length-1; el.options[i].insertAdjacentHTML（"AfterEnd", html）; } function initSized（el） { var h = 0; el.children[0].style.display = "none"; dropdown = el.children[1]; dropdown.style.visibility = "visible"; if （dropdown.children.length > el.size） { dropdown.style.overflow = "auto"; for （var i=0; i<el.size; i++） { h += dropdown.children[i].offsetHeight; } if （dropdown.style.borderWidth ！= null） { dropdown.style.pixelHeight = h + 4; } else dropdown.style.height = h; } dropdown.style.border = sizedBorderCss; el.style.height = dropdown.style.pixelHeight; } function copySelected（el） { var selectedIndex = findSelected（el）; selectedCell = el.children[0].rows[0].cells[0]; selectedDiv= el.children[1].children[selectedIndex]; selectedCell.innerHTML = selectedDiv.outerHTML; } function findSelected（el） { var selected = null; ec = el.children[1].children; var ecl = ec.length; for （var i=0; i<ecl; i++） { if （ec[i].getAttribute（"selected"） ！= null） { if （selected == null） { selected = i; } else ec[i].removeAttribute（"selected"）; } } if （selected == null） selected = 0; return selected; } function toggleDropDown（el） { if （el.size == 1） { dropDown = el.children[1]; if （dropDown.style.visibility == ""） dropDown.style.visibility = "hidden"; if （dropDown.style.visibility == "hidden"） showDropDown（dropDown）; else hideDropDown（dropDown）; } } function optionClick（） { el = getReal（window.event.srcElement, "className", "option"）; if （el.className == "option"） { dropdown= el.parentElement; selectBox = dropdown.parentElement; oldSelected = dropdown.children[findSelected（selectBox）] if（oldSelected ！= el） { oldSelected.removeAttribute（"selected"）; el.setAttribute（"selected", 1）; selectBox.selectedIndex = findSelected（selectBox）; } if （selectBox.onchange ！= null） { if （selectBox.id ！= ""） { eval（selectBox.onchange.replace（/this/g, selectBox.id））; } else { globalSelect = selectBox; eval（selectBox.onchange.replace（/this/g, "globalSelect"））; } } if （el.backupCss ！= null） el.style.cssText = el.backupCss; copySelected（selectBox）; toggleDropDown（selectBox）; highlightSelected（selectBox, true）; } } function optionOver（） { var toEl = getReal（window.event.toElement, "className", "option"）; var fromEl = getReal（window.event.fromElement, "className", "option"）; if （toEl == fromEl） return; var el = toEl; if （el.className == "option"） { if （el.backupCss == null） el.backupCss = el.style.cssText; highlightSelected（el.parentElement.parentElement, false）; el.style.cssText = el.backupCss + "; " + overOptionCss; this.highlighted = true; } } function optionOut（） { var toEl = getReal（window.event.toElement, "className", "option"）; var fromEl = getReal（window.event.fromElement, "className", "option"）; if （fromEl == fromEl.parentElement.children[findSelected（fromEl.parentElement.parentElement）]） { if （toEl == null） return; if （toEl.className ！= "option"） return; } if （toEl ！= null） { if （toEl.className ！= "option"） { if （fromEl.className == "option"） highlightSelected（fromEl.parentElement.parentElement, true）; } } if （toEl == fromEl） return; var el = fromEl; if （el.className == "option"） { if （el.backupCss ！= null） el.style.cssText = el.backupCss; } } function highlightSelected（el,add） { var selectedIndex = findSelected（el）; selected = el.children[1].children[selectedIndex]; if （add） { if （selected.backupCss == null） selected.backupCss = selected.style.cssText; selected.style.cssText = selected.backupCss + "; " + overOptionCss; } else if （！add） { if （selected.backupCss ！= null） selected.style.cssText = selected.backupCss; } } function hideShownDropDowns（） { var el = getReal（window.event.srcElement, "className", "select"）; var spans = document.all.tags（"SPAN"）; var selects = new Array（）; var index = 0; for （var i=0; i<spans.length; i++） { if （（spans[i].className == "select"） && （spans[i] ！= el）） { ropdown = spans[i].children[1]; if （（spans[i].size == 1） && （dropdown.style.visibility == "visible"）） selects[index++] = dropdown; } } for （var j=0; j<selects.length; j++） { hideDropDown（selects[j]）; } } function hideDropDown（el） { if （typeof（fade） == "function"） fade（el, false）; else el.style.visibility = "hidden"; } function showDropDown（el） { if （typeof（fade） == "function"） fade（el, true）; else if （typeof（swipe） == "function"） swipe（el, 2）; else el.style.visibility = "visible"; } function initSelectBoxes（） { var spans = document.all.tags（"SPAN"）; var selects = new Array（）; var index = 0; for （var i=0; i<spans.length; i++） { if （spans[i].className == "select"） selects[index++] = spans[i]; } for （var j=0; j<selects.length; j++） { initSelectBox（selects[j]）; } } function getReal（el, type, value） { temp = el; while （（temp ！= null） && （temp.tagName ！= "BODY"）） { if （eval（"temp." + type） == value） { el = temp; return el; } temp = temp.parentElement; } return el; } if （ie4） { window.onload = initSelectBoxes; document.onclick = hideShownDropDowns; } function writeSelectBox（matrix, id, size, onchange, css） { var d = window.document; var ie4 = （document.all ！= null）; if （ie4） { //alert（"Before！"）; var s = createIEString（matrix, id, size, onchange, css）; document.write（s）; //alert（"After！"）; }else { document.write（createXString（matrix, id, size, onchange, css））;} } function createIEString（matrix, id, size, onchange, css） { var str = ""; str += "<span class="select""; if （size == null） size = 1; str += " size="" + size + """; if （id ！= null） str += " id="" + id + """; if （onchange ！= null） str += " onchange="" + onchange + """; if （css ！= null） str += " style="" + css + """; str += ">
"; str += "<table class="selectTable" cellspacing="0" cellpadding="0"
"; str += " onclick="toggleDropDown（this.parentElement）">
"; str += "<tr>
"; str += "<td class="selected"> </td>
"; str += "<td align="CENTER" valign="MIDDLE" class="Button"
"; str += " onmousedown="this.style.border="2 inset buttonhighlight""
"; str += " onmouseup="this.style.border="2 outset buttonhighlight"">
"; str += "<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>
"; str += "</tr>
"; str += "</table>
"; str += "
"; for （var i=0; i<matrix.length; i++） { html = matrix[i].html; value= matrix[i].value; css= matrix[i].css; selected = matrix[i].selected; str += "
"; str += html; str += "
"; } str += "
"; str += "</span>
"; return str; } function createXString（matrix, id, size, onchange, css） { var str = "<form>
"; str += "<select"; if （size == null） size = 1; str += " size="" + size + """; if （id ！= null） str += " id="" + id + """; if （onchange ！= null） str += " onchange="" + onchange + """; str += ">
"; for （var i=0; i<matrix.length; i++） { html = matrix[i].html; value= matrix[i].value; css= matrix[i].css; selected = matrix[i].selected; str += "
<option"; if （value ！= null） str += " value="" + value + """; if （selected ！= null） str += " selected"; str += ">"; str += stripTags（html）; str += "</option>
"; } str += "
</select>
"; str += "</form>
"; return str; } function stripTags（str） { var s = 0; var e = -1; var r = ""; s = str.indexOf（"<",e）; do { r += str.substring（e + 1,s）; e = str.indexOf（">",s）; s = str.indexOf（"<",e）; } while （（s ！= -1） && （e ！= -1）） r += str.substring（e + 1,str.length）; return r; } function Option（html, value, css, selected） { this.html = html; this.value = value; this.css = css; this.selected = selected; } </script> <script type="text/javascript"> var optionArray = new Array（）; optionArray[0] = new Option（"Item 1", "value 1", "color: blue; text-decoration: underline;"）; optionArray[1] = new Option（"Item <b>2</b>", "value 2"）; optionArray[2] = new Option（"Item 3", "value 3", "color: red;", "selected"）; optionArray[3] = new Option（"Item 4", "value 4"）; optionArray[4] = new Option（"Item 5", "value 5"）; writeSelectBox（optionArray, "select1", 1, "alert（this.options[this.selectedIndex].value）", "margin-left: 10;"）; </script><script type="text/javascript"> writeSelectBox（optionArray, "select3", 3, "alert（this.options[this.selectedIndex].value）", "margin-left: 10;"）; </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"></style> <STYLE> BODY { SCROLLBAR-FACE-COLOR: #d80000; SCROLLBAR-HIGHLIGHT-COLOR: #0000fc; SCROLLBAR-SHADOW-COLOR: #24fc90; SCROLLBAR-ARROW-COLOR: #fcfc48; SCROLLBAR-TRACK-COLOR: #002400; SCROLLBAR-DARKSHADOW-COLOR: #00b448; SCROLLBAR-BASE-COLOR: #fc0000 } </STYLE> <scriptlanuage="JScript"> functionturnit（ss） { if（ss.style.display=="none"） {ss.style.display=""; } else {ss.style.display="none"; } } function sele（tid） { bb.style.display="none"; text1.value=tid.innerText; } function over（tid） { for （var i=1;i<4;i++） { eval（"t"+i）.className="" } tid.className="ss" } function out（tid） { if （bb.style.display！="none"） tid.className="" } </script> <style type="text/css"></style> </head> <body> <table width="98" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="98" nowrap> <input name="text1" type="text" size="10" class=n1 readonly value=请选择 onclick=turnit（bb）><input name="Submit" type="text" class="n2" value="" readonly onclick=turnit（bb）> </td> </tr> <tr> <td id=bb style=display:none> <table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb> <tr> <tdid=t1 onMouseOver =over（this） onMouseOut =out（this） onclick=sele（this）>选择1</td> </tr> <tr> <td id=t2 onMouseOver =over（this） onMouseOut =out（this） onclick=sele（this）>选择2</td> </tr> <tr> <td id=t3 onMouseOver =over（this） onMouseOut =out（this） onclick=sele（this）>选择3</td> </tr> </table> </td> </tr> </table> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]