css统一设置nput样式(区分input类型).docVIP

css统一设置input样式（区分input类型） 当你看到input这个html标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？……对，对，对，它们都对。也许你可能想不到，这个小小的input竟然可以创造出10个不同的东西，下面是个列表，看看，哪些是你没有想到的： input type=text / 文本框 input type=password / 密码框 input type=submit / 提交按钮 input type=reset / 重置按钮 input type=radio / 单选框 input type=checkbox / 复选框 input type=button / 普通按钮 input type=file / 文件选择控件 input type=hidden / 隐藏框 input type=image / 图片按钮 所以你可能会说，input真是一个伟大的东西，竟然这么有“搞头”，但是当你真正在项目中试图给不同的控件设置不同的样式时，你就会发现，input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份，但是，他的“N重身份”给网站设计者的确带来了不少的麻烦。好在，劳动人民是伟大的，解决问题的办法还是有滴～，虽然它们都有各自致命的缺点 Orz… 解放方法大致归纳一下，列表如下（小弟才疏，错误遗漏难免，还请各位高人指点）： 1.用css的expression判断表达式 2.用css中的type选择器 3.用javascript脚本实现 4.如果你用Microsoft Visual Studio 2005 或者后续版本开发项目，恭喜，你还可以使用skin。 下面就来讲解一下各个办法的详细实现和它们的优缺点。 1：用css的expression判断表达式 实现代码参考： !doctype html public -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title diffInput2 /title meta name=Author content=JustinYoung/ meta name=Keywords content=/ meta name=Description content=/ meta http-equiv=Content-Type content=text/html; charset=utf-8/ style type=text/css input { background-color:expression(this.type==text?#FFC:); } /style /head body dl dtThis is normal textbox:ddinput type=text name= dtThis is normal button:ddinput type=button value=im button /dl /body /html 优点：简单，轻量级 缺点：expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉 Orz… ★★★★★★★★★★★★★★★★★★★★★★★★★★★ 另一种方法： input{ zoom:expression(function(ele){(ele.className)?ele.className+= +ele.type:ele.className=ele.type; ele.style.zoom = 1;}(this)); } 两点： 1、将 input 的属性取出来，赋给 className。 2、对于 expression，这里使用一个无关紧要的属性（此处是zoom）来触发，处理完需要做的事情之后，再将此属性覆盖掉以解决 expression 不断执行的效率问题。 !--[if lt IE 7] style type=text/css media=screen input{ zoom: expression(function(ele){(ele.className)?ele.className+= +ele.t