css统一设置样式(区分类型).doc

css统一设置input样式（区分input类型）css统一设置input样式（区分input类型）当你看到这个html标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？对，对，对，它们都对。也许你可能想不到，这个小小的input竟然可以创造出10个不同的东西，下面是个列表，看看，哪些是你没有想到的： 文本框 密码框 提交按钮 重置按钮 单选框 复选框 普通按钮 文件选择控件 隐藏框 图片按钮所以你可能会说，input真是一个伟大的东西，竟然这么有“搞头”，但是当你真正在项目中试图给不同的控件设置不同的样式时，你就会发现，input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份，但是，他的“N重身份”给网站设计者的确带来了不少的麻烦。好在，劳动人民是伟大的，解决问题的办法还是有滴，虽然它们都有各自致命的缺点 Orz 解放方法大致归纳一下，列表如下（小弟才疏，错误遗漏难免，还请各位高人指点）：1.用css的expression判断表达式2.用css中的type选择器3.用javascript脚本实现4.如果你用Microsoft Visual Studio 2005 或者后续版本开发项目，恭喜，你还可以使用skin。下面就来讲解一下各个办法的详细实现和它们的优缺点。1：用css的expression判断表达式实现代码参考： diffInput2 input background-color:expression(this.type=text?#FFC:); This is normal textbox:This is normal button:优点：简单，轻量级缺点：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 不断执行的效率问题。input zoom: expression(function(ele)(ele.className)?ele.className+= +ele.type:ele.className=ele.type; ele.style.zoom = 1;(this);input.textborder: 1px solid; border-color: #CCC #EEE #EEE #CCC;background: #F5F5F5;input.passwordborder: 1px solid; border-color: #CCC #EEE #EEE #CCC;color: #000; background: #F5F5F5;width: 50px;input.buttonborder: 1px solid; border-color: #EEE #CCC #CCC #EEE;color: #000; font-weight: bold; background: #F5F5F5;input.resetborder: 1px solid; border-color: #EEE #CCC #CCC #EEE;color: #666; background: #F5F5F5;inputtype=textborder: 1px solid; border-color: #CCC #EEE #EEE #CCC;background: #F5F5F5;inputtype=passwordborder: 1px solid; border-color: #CCC #EEE #EEE #CCC;color: #000; background: #F5F5F5;width: 50px;inputtype=buttonborder: 1px solid; border-color: #EEE #CCC #CCC #EEE;color: #000; font-weight: bold; background: #F5F5F5;inputtype=resetborder: 1px solid; border-color: #EEE #CCC #CCC #EEE;color: #666; background: #F5F5F5; 2：用css中的type选择器实现参考代码： diffInput2 inputtype=text background-color:#FFC; inputtype=password background-image:url(BG.gif); inputtype=submit background-color:blue; color:white; inputtype=reset background-color:navy; color:white; inputtype=radio /*In FF,Some radio style like background-color not been supported*/ margin:10px; inputtype=checkbox /*In FF,Some checkbox style like background-color not been supported*/ margin:10px; inputtype=button background-color:lightblue; This is normal textbox:This is password textbox:This is submit button:This is reset button:This is radio: This is checkbox: This is normal button:优点：简单，明了，可以分区出各个input控件形态。缺点：type选择器，IE6之前的对web标准支持的不太好的浏览器不能支持（致命呀 Orz） 3：用javascript脚本实现实现参考代码：前台html代码： diffInput inputbehavior:url(css.htc); This is normal textbox:This is password textbox:This is submit button:This is reset button:This is radio: This is checkbox: This is normal button:Css.htc代码：switch(type) case text: style.backgroundColor=red; break; case password: style.backgroundImage=url(BG.gif); break; case submit: style.backgroundColor=blue; style.color=white; break; case reset: style.backgroundColor=navy; style.color=white; break; case radio: style.backgroundColor=hotpink; break; case checkbox: style.backgroundColor=green; break; case button: style.backgroundColor=lightblue; break; default: ;/others use default style.优点：可以分区出各个input控件形态。多种技术的混合使用，满足“我是高手”的虚荣心。缺点：技术牵扯面教广，因为用js后期处理，所以在js没有起作用之前，各个input还是原始状态，然后突然“变帅”会让你的页面很奇怪。较致命的是FireFox不支持 Orz4：Microsoft Visual Studio 2005中使用skin。Skin文件参考代码：注意里面的样式是用style加上的，而不是用cssClass，道理很简单，如果用cssClass，前面的再用cssClass就会覆盖这个cssClass。导致失败。当然