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

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

　　代码：

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]



    www.downcodes.com
    
    
    
    
    
    input
    {
    background-color:expression(this.type=="text"?'#FFC':'');
    }
    




This is normal textbox:

This is normal button:




　　另一种方法：

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]
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 不断执行的效率问题。

　　代码：

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]



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;
}










相关文章

使用w3Sockets组件实现域名查询功能

2009-06-23

ASP中实现文件上传方法的研究

2009-06-23

构建免受FSO组件威胁虚拟主机

2009-06-23

使用Web标准建站之调用样式表

2009-06-20

推荐阅读

DivCSS经验：三种实用CSS清除浮动的方法

2009-06-20

CSS调试必备：IE7与IE8共存！

2009-06-20

十天学会ASP之第六天

2009-06-20

十天学会ASP之第七天

2009-06-20