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

old9　楼主

银牌会员 

帖子: 653
体力: 1762
威望: 88
居住地: 安徽省合肥市

发表于 2008-10-24 12:08:21 |显示全部楼层

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

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

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

西部数码顶级域名注册商39元抢注！

使用道具举报