css表达式的缺点,CSS_CSS的expression判断表达式设置input样式， 用CSS的expression判断表达式 - phpStudy...

用CSS的expression判断表达式设置input样式，简单，轻量级。缺点在于expression判断表达式FireFox是不支持的。致命的是只能区分出一个(例如例子中就只能区分出text文本框)，不要试图设置多个…

代码：

html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

www.52CSS.com

input

{

background-color:expression(this.type=="text"?'#FFC':'');

}

This is normal textbox:

This is normal button:

另一种方法：

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 不断执行的效率问题。

代码：

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;

}