CSS分別設置Input樣式（按input類型）

時間 2019-11-12

標籤 css 分別設置 input 樣式類型欄目 CSS 简体版

原文原文鏈接

當你看到<input>這個html標籤的時候，你會想到什麼？一個文本框？一個按鈕？一個單選框？一個複選框？……對，對，對，它們都對。也許你可能想不到，這個小小的input居然能夠創造出10個不一樣的東西，下面是個列表，看看，哪些是你沒有想到的：javascript

<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" /> 圖片按鈕css

因此你可能會說，input真是一個偉大的東西，居然這麼有「搞頭」，可是當你真正在項目中試圖給不一樣的控件設置不一樣的樣式時，你就會發現，input真的能夠把「你的頭搞大」。我不知道爲何當初要給input賦予那麼多身份，可是，他的「N重身份」給網站設計者的確帶來了很多的麻煩。好在，勞動人民是偉大的，解決問題的辦法仍是有滴～，雖然它們都有各自致命的缺點 Orz… 解放方法大體概括一下，列表以下（小弟才疏，錯誤遺漏不免，還請各位高人指點）：html

1.用css的expression判斷表達式java

2.用css中的type選擇器web

3.用javascript腳本實現express

4.若是你用Microsoft Visual Studio 2005 或者後續版本開發項目，恭喜，你還可使用skin。瀏覽器

下面就來說解一下各個辦法的詳細實現和它們的優缺點。服務器

1：用css的expression判斷表達式網站

實現代碼參考：ui

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> diffInput2 </title>

input

{

padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">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));
}

兩點：

一、將 input 的屬性取出來，賦給 className。

二、對於 expression，這裏使用一個可有可無的屬性（此處是zoom）來觸發，處理完須要作的事情以後，再將此屬性覆蓋掉以解決 expression 不斷執行的效率問題。



<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">

<head>

<title> diffInput2 </title>

input[type="text"]

{

}

input[type="password"]

{

background-image:url(BG.gif);

}

input[type="submit"]

{

color:white;

}

input[type="reset"]

{

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"]

{

}

</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">

<head>

<title> diffInput </title>

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代碼：

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="</asp:TextBox>

<asp:Button runat="server" style=」background-color:red」></asp:Button>

注意裏面的樣式是用style加上的，而不是用cssClass，道理很簡單，若是用cssClass，前面的再用cssClass就會覆蓋這個cssClass。致使失敗。固然，skin不能單獨使用，還要配合css樣式表。

優勢：能夠分區出各個控件形態（注意：skin只能對服務器端控件使用，因此如今已經不是單純的input標籤了，雖然這些服務器端控件「打到」前臺的時候仍然是input控件）。除了css，又被分離一層，使得樣式的設置能有更好的定製性。其餘優勢（參考skin的優勢）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。