CSS分别设置Input样式（按input类型）
當(dāng)你看到<input>這個(gè)html標(biāo)簽的時(shí)候，你會(huì)想到什么？一個(gè)文本框？一個(gè)按鈕？一個(gè)單選框？一個(gè)復(fù)選框？……對(duì)，對(duì)，對(duì)，它們都對(duì)。也許你可能想不到，這個(gè)小小的input竟然可以創(chuàng)造出10個(gè)不同的東西，下面是個(gè)列表，看看，哪些是你沒有想到的：
<input type="text" /> 文本框?
<input type="password" /> 密碼框?
<input type="submit" /> 提交按鈕?
<input type="reset" /> 重置按鈕?
<input type="radio" /> 單選框?
<input type="checkbox" /> 復(fù)選框?
<input type="button" /> 普通按鈕?
<input type="file" /> 文件選擇控件?
<input type="hidden" /> 隱藏框?
<input type="image" /> 圖片按鈕
所以你可能會(huì)說(shuō)，input真是一個(gè)偉大的東西，竟然這么有“搞頭”，但是當(dāng)你真正在項(xiàng)目中試圖給不同的控件設(shè)置不同的樣式時(shí)，你就會(huì)發(fā)現(xiàn)，input真的可以把“你的頭搞大”。我不知道為什么當(dāng)初要給input賦予那么多身份，但是，他的“N重身份”給網(wǎng)站設(shè)計(jì)者的確帶來(lái)了不少的麻煩。好在，勞動(dòng)人民是偉大的，解決問題的辦法還是有滴～，雖然它們都有各自致命的缺點(diǎn) Orz… 解放方法大致歸納一下，列表如下（小弟才疏，錯(cuò)誤遺漏難免，還請(qǐng)各位高人指點(diǎn)）：
1.用css的expression判斷表達(dá)式
2.用css中的type選擇器
3.用javascript腳本實(shí)現(xiàn)
4.如果你用Microsoft Visual Studio 2005 或者后續(xù)版本開發(fā)項(xiàng)目，恭喜，你還可以使用skin。
下面就來(lái)講解一下各個(gè)辦法的詳細(xì)實(shí)現(xiàn)和它們的優(yōu)缺點(diǎn)。
1：用css的expression判斷表達(dá)式
實(shí)現(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)點(diǎn)：簡(jiǎn)單，輕量級(jí)
缺點(diǎn)：expression判斷表達(dá)式FireFox是不支持的。致命的是只能區(qū)分出一個(gè)（例如例子中就只能區(qū)分出text文本框），不要試圖設(shè)置多個(gè)，下面的會(huì)將上面的覆蓋掉 Orz…
★★★★★★★★★★★★★★★★★★★★★★★★★★★
另一種方法：
input{
??? zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}
兩點(diǎn)：
1、將 input 的屬性取出來(lái)，賦給 className。
2、對(duì)于 expression，這里使用一個(gè)無(wú)關(guān)緊要的屬性（此處是zoom）來(lái)觸發(fā)，處理完需要做的事情之后，再將此屬性覆蓋掉以解決 expression 不斷執(zhí)行的效率問題。
<!--[if lt IE 7]>
<style type="text/css" media="screen">
input{?
zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}
input.text{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
background: #F5F5F5;
}
input.password{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
color: #000; background: #F5F5F5;
width: 50px;
}
input.button{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #000; font-weight: bold; background: #F5F5F5;
}
input.reset{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #666; background: #F5F5F5;
}
</style>
<![endif]-->
<style type="text/css" media="all">
input[type="text"]{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
background: #F5F5F5;
}
input[type="password"]{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
color: #000; background: #F5F5F5;
width: 50px;
}
input[type="button"]{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #000; font-weight: bold; background: #F5F5F5;
}
input[type="reset"]{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #666; background: #F5F5F5;
}
</style>
</head>
<body>
<input type="text" name="xx" />
<input type="password" name="yy" />
<input type="checkbox" name="oo" />
<input type="radio" name="pp" />
<input type="button" name="qq" value="button" />
<input type="reset" name="oo" value="reset" />
</body>
</html>
?
★★★★★★★★★★★★★★★★★★★★★★★★★★★
?
2：用css中的type選擇器
實(shí)現(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)點(diǎn)：簡(jiǎn)單，明了，可以分區(qū)出各個(gè)input控件形態(tài)。
缺點(diǎn)：type選擇器，IE6之前的對(duì)web標(biāo)準(zhǔn)支持的不太好的瀏覽器不能支持（致命呀 Orz…）
?
3：用javascript腳本實(shí)現(xiàn)
實(shí)現(xiàn)參考代碼：
前臺(tái)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)點(diǎn)：可以分區(qū)出各個(gè)input控件形態(tài)。多種技術(shù)的混合使用，滿足“我是高手”的虛榮心。
缺點(diǎn)：技術(shù)牽扯面教廣，因?yàn)橛胘s后期處理，所以在js沒有起作用之前，各個(gè)input還是原始狀態(tài)，然后突然“變帥”會(huì)讓你的頁(yè)面很奇怪。較致命的是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>
注意里面的樣式是用style加上的，而不是用cssClass，道理很簡(jiǎn)單，如果用cssClass，前面的再用cssClass就會(huì)覆蓋這個(gè)cssClass。導(dǎo)致失敗。當(dāng)然，skin不能單獨(dú)使用，還要配合css樣式表。
優(yōu)點(diǎn)：可以分區(qū)出各個(gè)控件形態(tài)（注意：skin只能對(duì)服務(wù)器端控件使用，所以現(xiàn)在已經(jīng)不是單純的input標(biāo)簽了，雖然這些服務(wù)器端控件“打到”前臺(tái)的時(shí)候仍然是input控件）。除了css，又被分離一層，使得樣式的設(shè)置能有更好的定制性。其他優(yōu)點(diǎn)（參考skin的優(yōu)點(diǎn)）。
缺點(diǎn)：只能對(duì)服務(wù)器端控件使用。不是所有的項(xiàng)目都能使用skin功能 Orz…
轉(zhuǎn)自：http://hi.baidu.com/o0o%CD%F5%D4%F3%C3%F1o0o/blog/item/23164a4ecd0a8d3eaec3ab13.html
轉(zhuǎn)載于:https://www.cnblogs.com/ybbqg/archive/2012/03/16/2399672.html
總結(jié)
以上是生活随笔為你收集整理的CSS分别设置Input样式（按input类型）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （收藏）Html相关网址
- 下一篇： CSS布局——display，posit