【转载】给不同 type 的 input 自动设置样式
生活随笔
收集整理的這篇文章主要介紹了
【转载】给不同 type 的 input 自动设置样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
input 有一堆 type 屬性，不同的 type 對應不同的表單元素。CSS 定義的時候，對于支持 CSS2 選擇符的瀏覽器，可以使用 復制內容到剪貼板
input[type="text"] 等等來對 input 分別做不同定義，但是對于 IE6，這法子行不通。
一般的解決方案是給不同的 input 加不同的 class，可以手動加，也可以用 js 遍歷自動加，剛由一個問題想到可以用 expression 加。
關鍵代碼： 復制內容到剪貼板
????zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
} 兩點：
<!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=""?/>
<!--[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>
代碼:
input[type="checkbox"]input[type="text"] 等等來對 input 分別做不同定義，但是對于 IE6，這法子行不通。
一般的解決方案是給不同的 input 加不同的 class，可以手動加，也可以用 js 遍歷自動加，剛由一個問題想到可以用 expression 加。
關鍵代碼： 復制內容到剪貼板
代碼:
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 不斷執行的效率問題。
<!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=""?/>
<!--[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>
轉載于:https://www.cnblogs.com/CB/archive/2008/12/25/1362168.html
總結
以上是生活随笔為你收集整理的【转载】给不同 type 的 input 自动设置样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机硕士工资情况收集
- 下一篇： WSUS3.0的安装及部署(域下)