给不同 type 的 input 自动设置样式
input 有一堆 type 属性，不同的 type 对应不同的表单元素。CSS 定义的时候，对于支持 CSS2 选择符的浏览器，可以使用
代码:
input[type="checkbox"]
input[type="text"]一般的解决方案是给不同的 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>
- 双屏显示提升前端开发10%工作效率 - 2009年03月16日 16:03
- UED技术层次初探 - 2009年03月01日 23:07
- 口碑网首页前端技术分享系列之一，清除浮动 - 2008年11月12日 21:26
- [翻译]寻找圣杯 - 2008年11月12日 09:20
- 表单在各个浏览器下的表现统一-段正淳的css笔记(7) - 2008年11月11日 23:26
- 浅谈css框架开发-段正淳的css笔记(6) - 2008年11月11日 23:25
- 图片垂直居中 - 段正淳的css笔记(5) - 2008年01月10日 14:01
- css代码的简写 - 段正淳的css笔记(4) - 2008年01月10日 13:01
- css属性顺序书写规范 - 段正淳的css笔记(3) - 2008年01月10日 12:01
- 圆角的做法 - 段正淳的css笔记(2) - 2008年01月10日 11:01
