您的位置：首页 > Web前端 > CSS

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

2009-06-14 23:52 435 查看

用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航