css 统一设置 input 样式（区分 input 类型）1css 统一设置 input 样式（区分 input 类型）当你看到这个 html 标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？对， 对， 对，它们都对。也许你可能想不到，这个小小的 input 竟然可以创造出 10 个不同的东西，下面是个列表，看看，哪些是你没有想到的：文本框 密 码框 提交按钮 重置按钮 单选框 复 选框 普通按钮 文件选择 控件 隐藏框 图片按 钮所以你可能会说，input 真是一个伟大的东西，竟然这么有“搞头”，但是当你真正在项目中试图给不同的控件设置不同的样式时，你就会 发现， input 真的可以把“你的头搞大”。我不知道为什么当初要给 input 赋予那么多身份，但是，他的 “N 重身份”给网站设计者的确带来了不少的麻烦。好在，劳动人民是伟大的，解决问题的办法还是有滴，虽然它们都有各自致命的缺点 Orz 解放方法大致归纳一下，列表如下（小弟才疏，错误遗漏难免，还请各位高人指点）：1.用 css 的 expression 判断表达式2.用 css 中的 type 选择器3.用 javascript 脚本实现 css 统一设置 input 样式（区分 input 类型）24.如果你用 Microsoft Visual Studio 2005 或者后续版本开发项目，恭喜，你还可以使用 skin。下面就来讲解一下各个办法的详细实现和它们的优缺点。1：用 css 的 expression 判断表达式实现代码参考：diffInput2 inputbackground-color:expression(this.type=text?#FFC:);This is normal textbox: css 统一设置 input 样式（区分 input 类型）3This is normal button:优点：简单，轻量级缺点：expression 判断表达式 FireFox 是不支持的。致命的是只能区分出一个（例如例子中就只能区分出 text 文本框），不要试图设置多个，下面的会将上面的覆盖掉 Orz另一种方法：inputzoom: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; css 统一设置 input 样式（区分 input 类型）4color: #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; css 统一设置 input 样式（区分 input 类型）52：用 css 中的 type 选择器实现参考代码：diffInput2 inputtype=textbackground-color:#FFC;inputtype=passwordbackground-image:url(BG.gif); css 统一设置 input 样式（区分 input 类型）6inputtype=submitbackground-color:blue;color:white;inputtype=resetbackground-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*/ css 统一设置 input 样式（区分 input 类型）7margin:10px;inputtype=buttonbackground-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: css 统一设置 input 样式（区分 input 类型）8优点：简单，明了，可以分区出各个 input 控件形态。缺点：type 选择器，IE6 之前的对 web 标准支持的不太好的 浏览器不能支持（致命呀 Orz）3：用 javascript 脚本实现实现参考代码：前台 html 代码：diffInput inputbehavior:url(css.htc);This is normal textbox:This is password textbox: css 统一设置 input 样式（区分 input 类型）9This 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; css 统一设置 input 样式（区分 input 类型）10break;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 文件参考代码： css 统一设置 input 样式（区分 input 类型）11注意里面的样式是用 style 加上的，而不是用 cssClass，道理很简单，如果用 cssClass，前面的再用 cssClass 就会覆盖这个 cssClass。导致失败。当然，skin 不能单独使用， 还要配合 css 样式表。优点：可以分区出各个控件形态（注意：skin 只能对服务器端控件使用，所以现在已经不是单纯的 input 标签了，虽然这些服务器端控件“ 打到”前台的时候仍然是 input 控件）。除了 css，又被分离一层，使得样式的设 置能有更好的定制性。其他 优 点（参考 skin 的优点）。缺点：只能对服务器端控件使用。不是所有的 项目都能使用 skin 功能 Orz