css 统一input 样式

1.用css的expression判断表达式

    input

    {

        background-color:expression(this.type=="text"?'#FFC':'');

    }

优点：简单

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

2.用css中的type选择器

    input[type="text"]

    {

        background-color:#FFC;

    }

   

    input[type="password"]

    {

        background-image:url(BG.gif);

    }

优点：简单，明了，可以分区出各个input控件形态。

缺点：type选择器，IE6之前的对web标准支持的不太好的浏览器不能支持

3.用javascript脚本实现

<mce:script language=javascript><!--

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;

}

// --></mce:script>

优点：可以分区出各个input控件形态。

缺点：在js没有起作用之前，各个input还是原始状态，然后突然“变帅”会让你的页面很奇怪。较致命的是FireFox不支持

4.用Skin设置

Skin文件参考代码：

<asp:TextBox runat="server" style="background-color:#FFC " mce_style="background-color:#FFC "></asp:TextBox>

<asp:Button runat="server" style="”background-color:red”" mce_style="”background-color:red”"></asp:Button>

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

优点：可以分区出各个控件形态（注意：skin只能对服务器端控件使用，所以现在已经不是单纯的input标签了，虽然这些服务器端控件“打到”前台的时候仍然是input控件）。

缺点：只能对服务器端控件使用。