您当前的位置:首页 > 网页设计 > Web开发 > 正文

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

【字体大小: 2009-12-03 18:10 来源: 作者: 

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

  代码:  

  1. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" > 
  3. <head> 
  4.     <title>www.52CSS.com</title> 
  5.     <meta name="Author" content="JustinYoung"/> 
  6.     <meta name="Keywords" content=""/> 
  7.     <meta name="Description" content=""/> 
  8.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  9.     <style type="text/css"> 
  10.     input  
  11.     {  
  12.     background-color:expression(this.type=="text"?'#FFC':'');  
  13.     }  
  14.     </style> 
  15. </head> 
  16.  
  17. <body> 
  18. <dl> 
  19. <dt>This is normal textbox:<dd><input type="text" name=""> 
  20. <dt>This is normal button:<dd><input type="button" value="i'm button"> 
  21. </dl> 
  22. </body> 
  23. </html> 

  另一种方法:  

  1. input{  
  2.     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 不断执行的效率问题。

  代码:  

  1. <!--[if lt IE 7]> 
  2.  
  3. <style type="text/css" media="screen"> 
  4. input{   
  5. zoom: expression(function(ele){(ele.className)?ele.className+=" "+eleele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));  
  6. }  
  7. input.text{  
  8. border: 1px solid; border-color: #CCC #EEE #EEE #CCC;  
  9. background: #F5F5F5;  
  10. }  
  11. input.password{  
  12. border: 1px solid; border-color: #CCC #EEE #EEE #CCC;  
  13. color: #000; background: #F5F5F5;  
  14. width: 50px;  
  15. }  
  16. input.button{  
  17. border: 1px solid; border-color: #EEE #CCC #CCC #EEE;  
  18. color: #000; font-weight: bold; background: #F5F5F5;  
  19. }  
  20. input.reset{  
  21. border: 1px solid; border-color: #EEE #CCC #CCC #EEE;  
  22. color: #666; background: #F5F5F5;  
  23. }  
  24. </style> 
  25. <![endif]--> 
  26.  
  27. <style type="text/css" media="all"> 
  28. input[type="text"]{  
  29. border: 1px solid; border-color: #CCC #EEE #EEE #CCC;  
  30. background: #F5F5F5;  
  31. }  
  32. input[type="password"]{  
  33. border: 1px solid; border-color: #CCC #EEE #EEE #CCC;  
  34. color: #000; background: #F5F5F5;  
  35. width: 50px;  
  36. }  
  37. input[type="button"]{  
  38. border: 1px solid; border-color: #EEE #CCC #CCC #EEE;  
  39. color: #000; font-weight: bold; background: #F5F5F5;  
  40. }  
  41. input[type="reset"]{  
  42. border: 1px solid; border-color: #EEE #CCC #CCC #EEE;  
  43. color: #666; background: #F5F5F5;  
  44. }  
  45. </style> 
  46. </head> 
  47. <body> 
  48. <input type="text" name="xx" /> 
  49. <input type="password" name="yy" /> 
  50. <input type="checkbox" name="oo" /> 
  51. <input type="radio" name="pp" /> 
  52. <input type="button" name="qq" value="button" /> 
  53. <input type="reset" name="oo" value="reset" /> 
  54. </body> 
  55. </html> 
    顶一下
    (2)
    100%
    踩一下
    (0)
    0%
    【责任编辑:绝口不提】 标签:
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: