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判断表达式

实现代码参考：

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.button{

border: 1px solid; border-color: #EEE #CCC #CCC #EEE; color: #000; font-weight: bold; background: #F5F5F5;

}

input.reset{

border: 1px solid; border-color: #EEE #CCC #CCC #EEE; color: #666; background: #F5F5F5;

}

★★★★★★★★★★★★★★★★★★★★★★★★★★★

2：用css中的type选择器

实现参考代码：

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代码：

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--%>

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

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

缺点：只能对服务器端控件使用。不是所有的项目都能使用skin功能Orz…