當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【转载】给不同 type 的 input 自动设置样式

發(fā)布時間：2025/3/19 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了【转载】给不同 type 的 input 自动设置样式小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

input 有一堆 type 屬性，不同的 type 對應(yīng)不同的表單元素。CSS 定義的時候，對于支持 CSS2 選擇符的瀏覽器，可以使用復(fù)制內(nèi)容到剪貼板

代碼:

input[type="checkbox"]
input[type="text"] 等等來對 input 分別做不同定義，但是對于 IE6，這法子行不通。
一般的解決方案是給不同的 input 加不同的 class，可以手動加，也可以用 js 遍歷自動加，剛由一個問題想到可以用 expression 加。
關(guān)鍵代碼：復(fù)制內(nèi)容到剪貼板

代碼:

input{
????zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
} 兩點：

將 input 的屬性取出來，賦給 className。
對于 expression，這里使用一個無關(guān)緊要的屬性（此處是zoom）來觸發(fā)，處理完需要做的事情之后，再將此屬性覆蓋掉以解決 expression 不斷執(zhí)行的效率問題。

Code
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml"?lang="zh-CN"?xml:lang="zh-CN">
<head>
<meta?http-equiv="Content-type"?content="text/html;?charset=UTF-8"?/>
<title>title</title>
<meta?name="keywords"?content=""?/>

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

轉(zhuǎn)載于:https://www.cnblogs.com/CB/archive/2008/12/25/1362168.html

總結(jié)

以上是生活随笔為你收集整理的【转载】给不同 type 的 input 自动设置样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算机硕士工资情况收集
下一篇： WSUS3.0的安装及部署(域下)