CSS分别设置Input样式(按input类型)

当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:

<input type="text" /> 文本框 
<input type="password" /> 密码框 
<input type="submit" /> 提交按钮 
<input type="reset" /> 重置按钮 
<input type="radio" /> 单选框 
<input type="checkbox" /> 复选框 
<input type="button" /> 普通按钮 
<input type="file" /> 文件选择控件 
<input type="hidden" /> 隐藏框 
<input type="image" /> 图片按钮

所以你可能会说,input真是一个伟大的东西,竟然这么有“搞头”,但是当你真正在项目中试图给不同的控件设置不同的样式时,你就会发现,input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份,但是,他的“N重身份”给网站设计者的确带来了不少的麻烦。好在,劳动人民是伟大的,解决问题的办法还是有滴~,虽然它们都有各自致命的缺点 Orz… 解放方法大致归纳一下,列表如下(小弟才疏,错误遗漏难免,还请各位高人指点):

1.用css的expression判断表达式

2.用css中的type选择器

3.用javascript脚本实现

4.如果你用Microsoft Visual Studio 2005 或者后续版本开发项目,恭喜,你还可以使用skin。

下面就来讲解一下各个办法的详细实现和它们的优缺点。

1:用css的expression判断表达式

实现代码参考:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title> diffInput2 </title>

    <meta name="Author" content="JustinYoung"/>

    <meta name="Keywords" content=""/>

    <meta name="Description" content=""/>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css">

    input

    {

    padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">expression(this.type=="text"?‘#FFC‘:‘‘);

    }

    </style>

</head>

<body>

<dl>

<dt>This is normal textbox:<dd><input type="text" name="">

<dt>This is normal button:<dd><input type="button" value="i‘m button">

</dl>

</body>

</html>

优点:简单,轻量级

缺点: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 不断执行的效率问题。


<!--[if lt IE 7]>

<style type="text/css" media="screen">
input{ 
zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}
input.text{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
background: #F5F5F5;
}
input.password{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
color: #000; background: #F5F5F5;
width: 50px;
}
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;
}
</style>
<![endif]-->

<style type="text/css" media="all">
input[type="text"]{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
background: #F5F5F5;
}
input[type="password"]{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
color: #000; background: #F5F5F5;
width: 50px;
}
input[type="button"]{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #000; font-weight: bold; background: #F5F5F5;
}
input[type="reset"]{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #666; background: #F5F5F5;
}
</style>
</head>
<body>
<input type="text" name="xx" />
<input type="password" name="yy" />
<input type="checkbox" name="oo" />
<input type="radio" name="pp" />
<input type="button" name="qq" value="button" />
<input type="reset" name="oo" value="reset" />
</body>
</html>

 

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

 

2:用css中的type选择器

实现参考代码:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title> diffInput2 </title>

    <meta name="Author" content="JustinYoung"/>

    <meta name="Keywords" content=""/>

    <meta name="Description" content=""/>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

    input[type="text"]

    {

   

    }

   

    input[type="password"]

    {

    background-image:url(BG.gif);

    }

   

    input[type="submit"]

    {

   

    color:white;

    }

   

    input[type="reset"]

    {

   

    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"]

    {

   

    }

    </style>

</head>

<body>

<dl>

<dt>This is normal textbox:<dd><input type="text" name="">

<dt>This is password textbox:<dd><input type="password" name="">

<dt>This is submit button:<dd><input type="submit">

<dt>This is reset button:<dd><input type="reset">

<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">

<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">

<dt>This is normal button:<dd><input type="button" value="i‘m button">

</dl>

</body>

</html>

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

缺点:type选择器,IE6之前的对web标准支持的不太好的浏览器不能支持(致命呀 Orz…)

 

3:用javascript脚本实现

实现参考代码:

前台html代码:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title> diffInput </title>

    <meta name="Author" content="JustinYoung">

    <meta name="Keywords" content="">

    <meta name="Description" content="">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

    <style type="text/css">

    input{behavior:url(‘css.htc‘);}

    </style>

</head>

<body>

<dl>

<dt>This is normal textbox:<dd><input type="text" name="">

<dt>This is password textbox:<dd><input type="password" name="">

<dt>This is submit button:<dd><input type="submit">

<dt>This is reset button:<dd><input type="reset">

<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">

<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">

<dt>This is normal button:<dd><input type="button" value="i‘m button">

</dl>

</body>

</html>

Css.htc代码:

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

    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.

}

</script>

优点:可以分区出各个input控件形态。多种技术的混合使用,满足“我是高手”的虚荣心。

缺点:技术牵扯面教广,因为用js后期处理,所以在js没有起作用之前,各个input还是原始状态,然后突然“变帅”会让你的页面很奇怪。较致命的是FireFox不支持 Orz…

4:Microsoft Visual Studio 2005中使用skin。

Skin文件参考代码:

<%--Style for common TextBox--%>

<asp:TextBox runat="server" style="</asp:TextBox>

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


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

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。