不同type的input使用不同css的技巧

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':'#000');       }      

This is normal textbox:

This is normal button:

　　优点：简单，轻量级
缺点：expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉 Orz…

　　2：用css中的type选择器

　　实现参考代码：

      diffInput2                               input\[type="text"\]       {       background-color:#FFC;       }           input\[type="password"\]       {       background-image:url(https://upload-images.jcodecraeer.com/upload-images-old/a/cssjiqiaoyuguifan/2012/0427/https://upload-images.jcodecraeer.com/upload-images-old/a/cssjiqiaoyuguifan/2012/0427/BG.gif);       }           input\[type="submit"\]       {       background-color:blue;       color:white;       }           input\[type="reset"\]       {       background-color:navy;       color:white;       }           input\[type="radio"\]       {       /*In FF,Some radio style like background-color not been supported*/       margin:10px;       }           input\[type="checkbox"\]       {       /*In FF,Some checkbox style like background-color not been supported*/       margin:10px;       }           input\[type="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                               input{behavior: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代码：

　　优点：可以分区出各个input控件形态。多种技术的混合使用，满足“我是高手”的虚荣心。
缺点：技术牵扯面教广，因为用js后期处理，所以在js没有起作用之前，各个input还是原始状态，然后突然“变帅”会让你的页面很奇怪。较致命的是FireFox不支持 Orz…

　　4：Microsoft Visual Studio 2005中使用skin。
Skin文件参考代码：
<%--Style for common TextBox--%>
<asp:TextBox runat="server" style="background-color:#FFC "></asp:TextBox>
<asp:Button runat="server" style=”background-color:red”></asp:Button>

　　注意里面的样式是用style加上的，而不是用cssClass，道理很简单，如果用cssClass，前面的再用cssClass就会覆盖这个cssClass。导致失败。当然，skin不能单独使用，还要配合css样式表。

　　优点：可以分区出各个控件形态（注意：skin只能对服务器端控件使用，所以现在已经不是单纯的input标签了，虽然这些服务器端控件“打到”前台的时候仍然是input控件）。除了css，又被分离一层，使得样式的设置能有更好的定制性。其他优点（参考skin的优点）。