| 當(dāng)你看到<input>這個html標(biāo)簽的時候，你會想到什么？一個文本框？一個按鈕？一個單選框？一個復(fù)選框？……對，對，對，它們都對。也許你可能想不到，這個小小的input竟然可以創(chuàng)造出10個不同的東西，下面是個列表，看看，哪些是你沒有想到的： <input type="text" /> 文本框 所以你可能會說，input真是一個偉大的東西，竟然這么有“搞頭”，但是當(dāng)你真正在項目中試圖給不同的控件設(shè)置不同的樣式時，你就會發(fā)現(xiàn)，input真的可以把“你的頭搞大”。我不知道為什么當(dāng)初要給input賦予那么多身份，但是，他的“N重身份”給網(wǎng)站設(shè)計者的確帶來了不少的麻煩。好在，勞動人民是偉大的，解決問題的辦法還是有滴～，雖然它們都有各自致命的缺點 Orz… 解放方法大致歸納一下，列表如下（小弟才疏，錯誤遺漏難免，還請各位高人指點）： 1.用css的expression判斷表達(dá)式 2.用css中的type選擇器 3.用javascript腳本實現(xiàn) 4.如果你用Microsoft Visual Studio 2005 或者后續(xù)版本開發(fā)項目，恭喜，你還可以使用skin。 下面就來講解一下各個辦法的詳細(xì)實現(xiàn)和它們的優(yōu)缺點。 1：用css的expression判斷表達(dá)式 實現(xiàn)代碼參考： <!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> <title> diffInput2 </title> <meta name="Author" content="JustinYoung"/> <meta name="Keywords" content=""/> <meta name="Description" content=""/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> input { background-color:expression(this.type=="text"?'#FFC':''); } </style> </head> <body> <dl> <dt>This is normal textbox:<dd><input type="text" name=""> <dt>This is normal button:<dd><input type="button" value="i'm button"> </dl> </body> </html> 優(yōu)點：簡單，輕量級 缺點：expression判斷表達(dá)式FireFox是不支持的。致命的是只能區(qū)分出一個（例如例子中就只能區(qū)分出text文本框），不要試圖設(shè)置多個，下面的會將上面的覆蓋掉 Orz… ★★★★★★★★★★★★★★★★★★★★★★★★★★★ 另一種方法： input{
1、將 input 的屬性取出來，賦給 className。 2、對于 expression，這里使用一個無關(guān)緊要的屬性（此處是zoom）來觸發(fā)，處理完需要做的事情之后，再將此屬性覆蓋掉以解決 expression 不斷執(zhí)行的效率問題。
★★★★★★★★★★★★★★★★★★★★★★★★★★★
2：用css中的type選擇器 實現(xiàn)參考代碼： <!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> <title> diffInput2 </title> <meta name="Author" content="JustinYoung"/> <meta name="Keywords" content=""/> <meta name="Description" content=""/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> input[type="text"] { background-color:#FFC; }
input[type="password"] { background-image:url(BG.gif); }
input[type="submit"] { background-color:blue; color:white; }
input[type="reset"] { background-color:navy; color:white; }
input[type="radio"] { /*In FF,Some radio style like background-color not been supported*/ margin:10px; }
input[type="checkbox"] { /*In FF,Some checkbox style like background-color not been supported*/ margin:10px; }
input[type="button"] { background-color:lightblue; } </style> </head> <body> <dl> <dt>This is normal textbox:<dd><input type="text" name=""> <dt>This is password textbox:<dd><input type="password" name=""> <dt>This is submit button:<dd><input type="submit"> <dt>This is reset button:<dd><input type="reset"> <dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1"> <dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2"> <dt>This is normal button:<dd><input type="button" value="i'm button"> </dl> </body> </html> 優(yōu)點：簡單，明了，可以分區(qū)出各個input控件形態(tài)。 缺點：type選擇器，IE6之前的對web標(biāo)準(zhǔn)支持的不太好的瀏覽器不能支持（致命呀 Orz…）
3：用javascript腳本實現(xiàn) 實現(xiàn)參考代碼： 前臺html代碼： <!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> <title> diffInput </title> <meta name="Author" content="JustinYoung"> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <style type="text/css"> input{behavior:url('css.htc');} </style> </head> <body> <dl> <dt>This is normal textbox:<dd><input type="text" name=""> <dt>This is password textbox:<dd><input type="password" name=""> <dt>This is submit button:<dd><input type="submit"> <dt>This is reset button:<dd><input type="reset"> <dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1"> <dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2"> <dt>This is normal button:<dd><input type="button" value="i'm button"> </dl> </body> </html> Css.htc代碼： <script language=javascript> switch(type) { case 'text': style.backgroundColor="red"; break; case 'password': style.backgroundImage="url(BG.gif)"; break; case 'submit': style.backgroundColor="blue"; style.color="white"; break; case 'reset': style.backgroundColor="navy"; style.color="white"; break; case 'radio': style.backgroundColor="hotpink"; break; case 'checkbox': style.backgroundColor="green"; break; case 'button': style.backgroundColor="lightblue"; break; default: ;//others use default style. } </script> 優(yōu)點：可以分區(qū)出各個input控件形態(tài)。多種技術(shù)的混合使用，滿足“我是高手”的虛榮心。 缺點：技術(shù)牽扯面教廣，因為用js后期處理，所以在js沒有起作用之前，各個input還是原始狀態(tài)，然后突然“變帥”會讓你的頁面很奇怪。較致命的是FireFox不支持 Orz… 4：Microsoft Visual Studio 2005中使用skin。 Skin文件參考代碼： <%--Style for common TextBox--%> <asp:TextBox runat="server" style="background-color:#FFC "></asp:TextBox> <asp:Button runat="server" style=”background-color:red”></asp:Button>
優(yōu)點：可以分區(qū)出各個控件形態(tài)（注意：skin只能對服務(wù)器端控件使用，所以現(xiàn)在已經(jīng)不是單純的input標(biāo)簽了，雖然這些服務(wù)器端控件“打到”前臺的時候仍然是input控件）。除了css，又被分離一層，使得樣式的設(shè)置能有更好的定制性。其他優(yōu)點（參考skin的優(yōu)點）。 缺點：只能對服務(wù)器端控件使用。不是所有的項目都能使用skin功能 Orz… |
