当你看到这个html标签的时候&＃xff0c;你会想到什么&＃xff1f;一个文本框&＃xff1f;一个按钮&＃xff1f;一个单选框&＃xff1f;一个复选框&＃xff1f;……对&＃xff0c;对&＃xff0c;对&＃xff0c;它们都对。也许你可能想不到&＃xff0c;这个小小的input竟然可以创造出10个不同的东西&＃xff0c;下面是个列表&＃xff0c;看看&＃xff0c;哪些是你没有想到的&＃xff1a;
- 文本框
- 密码框
- 提交按钮
- 重置按钮
- 单选框
- 复选框
- 普通按钮
- 文件选择控件
- 隐藏框
- 图片按钮
所以你可能会说&＃xff0c;input真是一个伟大的东西&＃xff0c;竟然这么有“搞头”&＃xff0c;但是当你真正在项目中试图给不同的控件设置不同的样式时&＃xff0c;你就会发现&＃xff0c;input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份&＃xff0c;但是&＃xff0c;他的“N重身份”给网站设计者的确带来了不少的麻烦。好在&＃xff0c;劳动人民是伟大的&＃xff0c;解决问题的办法还是有滴&＃xff5e;&＃xff0c;虽然它们都有各自致命的缺点 Orz… 解放方法大致归纳一下&＃xff0c;列表如下&＃xff08;小弟才疏&＃xff0c;错误遗漏难免&＃xff0c;还请各位高人指点&＃xff09;&＃xff1a;
1.用css的expression判断表达式
2.用css中的type选择器
3.用Javascript脚本实现
4.如果你用Microsoft Visual Studio 2005 或者后续版本开发项目&＃xff0c;恭喜&＃xff0c;你还可以使用skin。
下面就来讲解一下各个办法的详细实现和它们的优缺点。
1&＃xff1a;用css的expression判断表达式
实现代码参考&＃xff1a;
<html xmlns&＃61;"http://www.w3.org/1999/xhtml" >
<head>
<title> diffInput2 title>
<meta name&＃61;"Author" content&＃61;"JustinYoung"/>
<meta name&＃61;"Keywords" content&＃61;""/>
<meta name&＃61;"Description" content&＃61;""/>
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8"/>
<style type&＃61;"text/css">
input
{
background-color:expression(this.type&＃61;&＃61;"text"?&＃39;#FFC&＃39;:&＃39;&＃39;);
}
style>
head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type&＃61;"text" name&＃61;"">
<dt>This is normal button:<dd><input type&＃61;"button" value&＃61;"i&＃39;m button">
dl>
body>
html>
优点&＃xff1a;简单&＃xff0c;轻量级
缺点&＃xff1a;expression判断表达式FireFox是不支持的。致命的是只能区分出一个&＃xff08;例如例子中就只能区分出text文本框&＃xff09;&＃xff0c;不要试图设置多个&＃xff0c;下面的会将上面的覆盖掉 Orz…
2&＃xff1a;用css中的type选择器
实现参考代码&＃xff1a;
<html xmlns&＃61;"http://www.w3.org/1999/xhtml" >
<head>
<title> diffInput2 title>
<meta name&＃61;"Author" content&＃61;"JustinYoung"/>
<meta name&＃61;"Keywords" content&＃61;""/>
<meta name&＃61;"Description" content&＃61;""/>
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8" />
<style type&＃61;"text/css">
input[type&＃61;"text"]
{
background-color:#FFC;
}
input[type&＃61;"password"]
{
background-image:url(BG.gif);
}
input[type&＃61;"submit"]
{
background-color:blue;
color:white;
}
input[type&＃61;"reset"]
{
background-color:navy;
color:white;
}
input[type&＃61;"radio"]
{
/*In FF,Some radio style like background-color not been supported*/
margin:10px;
}
input[type&＃61;"checkbox"]
{
/*In FF,Some checkbox style like background-color not been supported*/
margin:10px;
}
input[type&＃61;"button"]
{
background-color:lightblue;
}
style>
head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type&＃61;"text" name&＃61;"">
<dt>This is password textbox:<dd><input type&＃61;"password" name&＃61;"">
<dt>This is submit button:<dd><input type&＃61;"submit">
<dt>This is reset button:<dd><input type&＃61;"reset">
<dt>This is radio:<dd><input type&＃61;"radio" name&＃61;"ground1"> <input type&＃61;"radio" name&＃61;"ground1">
<dt>This is checkbox:<dd><input type&＃61;"checkbox" name&＃61;"ground2"> <input type&＃61;"checkbox" name&＃61;"ground2">
<dt>This is normal button:<dd><input type&＃61;"button" value&＃61;"i&＃39;m button">
dl>
body>
html>
优点&＃xff1a;简单&＃xff0c;明了&＃xff0c;可以分区出各个input控件形态。
缺点&＃xff1a;type选择器&＃xff0c;IE6之前的对web标准支持的不太好的浏览器不能支持&＃xff08;致命呀 Orz…&＃xff09;
3&＃xff1a;用Javascript脚本实现
实现参考代码&＃xff1a;
前台html代码&＃xff1a;
<html xmlns&＃61;"http://www.w3.org/1999/xhtml" >
<head>
<title> diffInput title>
<meta name&＃61;"Author" content&＃61;"JustinYoung">
<meta name&＃61;"Keywords" content&＃61;"">
<meta name&＃61;"Description" content&＃61;"">
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8" >
<style type&＃61;"text/css">
input{behavior:url(&＃39;css.htc&＃39;);}
style>
head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type&＃61;"text" name&＃61;"">
<dt>This is password textbox:<dd><input type&＃61;"password" name&＃61;"">
<dt>This is submit button:<dd><input type&＃61;"submit">
<dt>This is reset button:<dd><input type&＃61;"reset">
<dt>This is radio:<dd><input type&＃61;"radio" name&＃61;"ground1"> <input type&＃61;"radio" name&＃61;"ground1">
<dt>This is checkbox:<dd><input type&＃61;"checkbox" name&＃61;"ground2"> <input type&＃61;"checkbox" name&＃61;"ground2">
<dt>This is normal button:<dd><input type&＃61;"button" value&＃61;"i&＃39;m button">
dl>
body>
html>
Css.htc代码&＃xff1a;
switch(type)
{
case &＃39;text&＃39;:
style.backgroundColor&＃61;"red";
break;
case &＃39;password&＃39;:
style.backgroundImage&＃61;"url(BG.gif)";
break;
case &＃39;submit&＃39;:
style.backgroundColor&＃61;"blue";
style.color&＃61;"white";
break;
case &＃39;reset&＃39;:
style.backgroundColor&＃61;"navy";
style.color&＃61;"white";
break;
case &＃39;radio&＃39;:
style.backgroundColor&＃61;"hotpink";
break;
case &＃39;checkbox&＃39;:
style.backgroundColor&＃61;"green";
break;
case &＃39;button&＃39;:
style.backgroundColor&＃61;"lightblue";
break;
default: ;//others use default style.
}
script>
优点&＃xff1a;可以分区出各个input控件形态。多种技术的混合使用&＃xff0c;满足“我是高手”的虚荣心。
缺点&＃xff1a;技术牵扯面教广&＃xff0c;因为用js后期处理&＃xff0c;所以在js没有起作用之前&＃xff0c;各个input还是原始状态&＃xff0c;然后突然“变帅”会让你的页面很奇怪。较致命的是FireFox不支持 Orz…
4&＃xff1a;Microsoft Visual Studio 2005中使用skin。
Skin文件参考代码&＃xff1a;
<asp:TextBox runat&＃61;"server" style&＃61;"background-color:#FFC ">asp:TextBox>
<asp:Button runat&＃61;"server" style&＃61;”background-color:red”>asp:Button>
注意里面的样式是用style加上的&＃xff0c;而不是用cssClass&＃xff0c;道理很简单&＃xff0c;如果用cssClass&＃xff0c;前面的再用cssClass就会覆盖这个cssClass。导致失败。当然&＃xff0c;skin不能单独使用&＃xff0c;还要配合css样式表。
优点&＃xff1a;可以分区出各个控件形态&＃xff08;注意&＃xff1a;skin只能对服务器端控件使用&＃xff0c;所以现在已经不是单纯的input标签了&＃xff0c;虽然这些服务器端控件“打到”前台的时候仍然是input控件&＃xff09;。除了css&＃xff0c;又被分离一层&＃xff0c;使得样式的设置能有更好的定制性。其他优点&＃xff08;参考skin的优点&＃xff09;。
缺点&＃xff1a;只能对服务器端控件使用。不是所有的项目都能使用skin功能 Orz…
总结&＃xff1a;上面的方法&＃xff0c;都是有各自的优点和缺点&＃xff0c;所以单独的使用任何一个都不能很好的解决问题。所以应该将多个方法配合一起使用&＃xff0c;这样才能较好的解决问题。但是多个方法配合使用就是完美的了吗&＃xff1f;NO&＃xff5e;&＃xff01;它也有致命的缺点——多套方案的维护需要更大的成本&＃xff01;
后记&＃xff1a;这是一个以IE6为首&＃xff0c;非web标准浏览器横扫天下的乱世年代&＃xff0c;不知有多少网页初学者惨死在IE6的诡异解析模式之下&＃xff0c;又有多少程序员被IE6所奴役&＃xff0c;还有无数web设计者在IE6的胯下忍辱偷生。虽然黑暗中我们欣慰的看到FireFox反对暴统的勇者的出现&＃xff0c;以及IE7对Web标准越来越好的支持这道曙光。但是黑夜仍旧将会持续很长一段时间。对于web标准一统天下的年代&＃xff0c;我们既喜且悲。喜的是&＃xff0c;到那个时候&＃xff0c;我们做网页设计和规划将会如同吃饭般简单&＃xff0c;悲的是&＃xff1a;如果真的到了那个时候&＃xff0c;我们吃饭的饭碗还能那么重吗&＃xff1f;不过&＃xff0c;为了人类社会的进步&＃xff0c;拯救地球的科技&＃xff0c;发展宇宙的技术文化 -_-b… 我依然期待web标准一统天下的到来。
keyword:自动区分各类不同的input样式,在CSS中如何区分和,利用Javascript来实现自动区分各类不同的input样式,input,input type,input type file,input type hidden,input file,input.dll,html input,input type image
京公网安备 11010802041100号