HTML里select的CSS樣式的改變_表單特效

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:33:45

HTML里select的CSS樣式的改變_表單特效

HTML里select的CSS樣式的改變_表單特效:本以為可以很簡單的在CSS里像input那樣的給解決，結果沒想到試了一下才知道常規(guī)的CSS根本沒法改變的select樣式，CSS里怎么弄，select都仍然是默認的那三維的樣式。于是在網(wǎng)上搜索了一下，才知道，原來這個select是不能用常規(guī)的方法來定義CSS樣式的。要用特

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML里select的CSS樣式的改變_表單特效:本以為可以很簡單的在CSS里像input那樣的給解決，結果沒想到試了一下才知道常規(guī)的CSS根本沒法改變的select樣式，CSS里怎么弄，select都仍然是默認的那三維的樣式。于是在網(wǎng)上搜索了一下，才知道，原來這個select是不能用常規(guī)的方法來定義CSS樣式的。要用特

本以為可以很簡單的在CSS里像input那樣的給解決，結果沒想到試了一下才知道常規(guī)的CSS根本沒法改變的select樣式，CSS里怎么弄，select都仍然是默認的那三維的樣式。于是在網(wǎng)上搜索了一下，才知道，原來這個select是不能用常規(guī)的方法來定義CSS樣式的。要用特殊的方法來處理。相信有很多朋友在處理網(wǎng)頁的時候都會遇到這個問題，于是找了一篇不錯的文章轉過來，希望對大家有幫助————

首先要告訴大家，如果你是用css的方法，除了箭頭部分，其他都可以改變，這是很令人別扭的事，因為其他的樣式改了，箭頭部分改不了等于無用。
下面舉個css改select的例子
<style> .box{border:1px solid #C0C0C0;width:182px;height:19px;clip:rect(0px,181px,18px,0px);overflow:hidden;} .box2{border:1px solid #F4F4F4;width:180px;height:17px;clip:rect(0px,179px,16px,0px);overflow:hidden;} select{position:relative;left:-2px;top:-2px;font-size:12px;width:183px;line-height:14px;bo rder:0px;color:#909993;} </style> <select hidefocus> <option selected>網(wǎng)站的封面 <option value=031113>上海夏天(一一友情提供) <option value=031106>上海夏天(一) <option value=030916>上海夏天出版了 <option value=031018>在雨中(二) <option value=030915>開往黎明的地鐵(二) <option value=030913>開往黎明的地鐵 <option value=031029>親愛的你們在干什么 <option value=000000>更多封面…… </select>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
如果你想徹底的改變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(); }//鼠標經(jīng)過變色 function out(obj){ obj.className="td_out" }//鼠標離開還原 function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定義去空格函數(shù)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(''); 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=\'\'">'); 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\n'; str += '<table class="selectTable" cellspacing="0" cellpadding="0"\n'; str += ' onclick="toggleDropDown(this.parentElement)">\n'; str += '<tr>\n'; str += '<td class="selected"> </td>\n'; str += '<td align="CENTER" valign="MIDDLE" class="Button"\n'; str += ' onmousedown="this.style.border=\'2 inset buttonhighlight\'"\n'; str += ' onmouseup="this.style.border=\'2 outset buttonhighlight\'">\n'; str += '6</td>\n'; str += '</tr>\n'; str += '</table>\n'; str += '\n'; 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 += '\n'; str += html; str += '\n'; } str += '\n'; str += '\n'; return str; } function createXString(matrix, id, size, onchange, css) { var str = '\n'; 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需刷新才能執(zhí)行]
<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> <script lanuage="JScript"> function turnit(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> <td id=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需刷新才能執(zhí)行]

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML里select的CSS樣式的改變_表單特效

推薦度：

點擊下載本文 文檔為doc格式

標簽：樣式表單 html

熱門焦點

HTML里select的CSS樣式的改變_表單特效

HTML里select的CSS樣式的改變_表單特效

HTML里select的CSS樣式的改變_表單特效

最新推薦

猜你喜歡

熱門推薦