[讨论] 给不同 type 的 input 自动设置样式

old9 [楼主]

银牌会员

认证
帖子: 647
体力: 1087
威望: 88
当前: 安徽合肥
离线: 24 天

专长 网页设计,前端制作,AS

1^# 大中小发表于 2008-10-24 12:08

input 有一堆 type 属性，不同的 type 对应不同的表单元素。CSS 定义的时候，对于支持 CSS2 选择符的浏览器，可以使用

复制内容到剪贴板

代码:

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="" />

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

提示：您可以先修改部分代码再运行

http://old9.blogsome.com 已被 GFW 封锁