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