css樣式之區(qū)分input是按鈕還是文本框的方法第1/4頁
更新時間:2008年09月02日 00:26:12 作者:
對設(shè)置樣式時怎么區(qū)分input是按鈕還是文本框問題的技術(shù)調(diào)查——把input里面的東西剔出來
當(dāng)你看到<input>這個html標(biāo)簽的時候,你會想到什么?一個文本框?一個按鈕?一個單選框?一個復(fù)選框?……對,對,對,它們都對。也許你可能想不到,這個小小的input竟然可以創(chuàng)造出10個不同的東西,下面是個列表,看看,哪些是你沒有想到的:
<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" /> 圖片按鈕
所以你可能會說,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)代碼參考:
優(yōu)點:簡單,輕量級
缺點:expression判斷表達(dá)式FireFox是不支持的。致命的是只能區(qū)分出一個(例如例子中就只能區(qū)分出text文本框),不要試圖設(shè)置多個,下面的會將上面的覆蓋掉 Orz…
<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" /> 圖片按鈕
所以你可能會說,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>
<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…
相關(guān)文章
網(wǎng)頁中關(guān)閉IE的圖像工具欄和XP主題
網(wǎng)頁中關(guān)閉IE的圖像工具欄和XP主題...2007-01-01
編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu
編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu...2007-03-03
html小技巧之td,div標(biāo)簽里內(nèi)容不換行
這篇文章主要介紹了td,div標(biāo)簽里內(nèi)容不換行的方法,需要的朋友可以參考下2014-05-05
CSS規(guī)則層疊的應(yīng)用 css必須要注意的幾點
前幾天,我解釋了 CSS規(guī)則層疊時的算法 雖然看起來復(fù)雜,但是在實際應(yīng)用過程中,還不算太復(fù)雜,因為諸如user style和inline style之類的東西我們很少考慮。2008-04-04

