当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的: <input type="text" /> 文本框 所以你可能会说,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 { background-color: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{
1、将 input 的属性取出来,赋给 className。 2、对于 expression,这里使用一个无关紧要的属性(此处是zoom)来触发,处理完需要做的事情之后,再将此属性覆盖掉以解决 expression 不断执行的效率问题。
★★★★★★★★★★★★★★★★★★★★★★★★★★★
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"] { background-color:#FFC; }
input[type="password"] { background-image:url(BG.gif); }
input[type="submit"] { background-color:blue; color:white; }
input[type="reset"] { background-color:navy; 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"] { background-color:lightblue; } </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="background-color:#FFC "></asp:TextBox> <asp:Button runat="server" style=”background-color:red”></asp:Button>
优点:可以分区出各个控件形态(注意:skin只能对服务器端控件使用,所以现在已经不是单纯的input标签了,虽然这些服务器端控件“打到”前台的时候仍然是input控件)。除了css,又被分离一层,使得样式的设置能有更好的定制性。其他优点(参考skin的优点)。 缺点:只能对服务器端控件使用。不是所有的项目都能使用skin功能 Orz… |
联系客服