CSS expression判断表达式设置input样式

用CSS的expression判断表达式设置input样式，简单，轻量级。缺点在于expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个… 代码：复制代码代码如下: <!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>www.52CSS.com</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> 另一种方法：复制代码代码如下: 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 不断执行的效率问题。　　代码：复制代码代码如下:  <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>

　　推荐阅读

　　CSS 优先级详细分析

在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascading Style Sheets）的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对>>>详细阅读

本文标题：CSS expression判断表达式设置input样式

地址：http://www.17bianji.com/kaifa2/CSS/16850.html

1/2 1