您的位置：首页 > Web前端 > CSS

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

2008-12-25 11:25 302 查看

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 不断执行的效率问题。

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航