css统一设置input样式（区分input类型）

最新推荐文章于 2022-04-01 16:43:55 发布

iteye_13847

最新推荐文章于 2022-04-01 16:43:55 发布

阅读量610

点赞数

分类专栏： javascript 文章标签： CSS Firefox 浏览器 JavaScript 脚本 ViewUI

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了四种设置不同类型的HTML输入框样式的方案：利用CSS的expression、type选择器、JavaScript脚本以及Skin设置方法，并讨论了各自的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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脚本实现
<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;
}
</script>
优点：可以分区出各个input控件形态。
缺点：在js没有起作用之前，各个input还是原始状态，然后突然“变帅”会让你的页面很奇怪。较致命的是FireFox不支持

4.用Skin设置
Skin文件参考代码：

<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控件）。
缺点：只能对服务器端控件使用。