今天小编跟大家讲解下有关CSS expression判断表达式设置input样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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 不断执行的效率问题。 代码： 复制代码代码如下: <!--[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>来源：爱蒂网
