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" "">
<html xmlns="" >
<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);">pe=="text"?'#FFC':'');
}
</style>
</head>
html input type属性<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>
</html>
优点：简单，轻量级
缺点：expression判断表达式FireFox是不⽀持的。致命的是只能区分出⼀个（例如例⼦中就只能区分出text⽂本框），不要试图设置多个，下⾯的会将上⾯的覆盖掉 Orz…
★★★★★★★★★★★★★★★★★★★★★★★★★★★
另⼀种⽅法：
input{
zoom: expression(function(ele){(ele.className)?ele.className+=" "+pe:ele.pe; = "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+=" "+pe:ele.pe; = "1";}(this));
}
<{
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;
}
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;
}
</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" ""> <html xmlns="" >
<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" "">
<html xmlns="" >
<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";
break;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论