css樣式之區(qū)分input是按鈕還是文本框的方法第1/4頁(yè)

2020-10-23 18:32:08

字體：大中小

供稿：網(wǎng)友

當(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è)列表，看看，哪些是你沒(méi)有想到的：
<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)人民是偉大的，解決問(wèn)題的辦法還是有滴～，雖然它們都有各自致命的缺點(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ù)版本開(kāi)發(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…

1234下一頁(yè)閱讀全文

上一篇：CSS expression控制圖片自動(dòng)縮放效果代碼[兼容 IE,Firefox]

下一篇：css文本框與按鈕美化效果代碼