特色栏目

ASP源码

PHP源码

.NET源码

JSP源码
游戏频道
专题合集
关闭菜单
首页> WEB标准化> CSS的expression判断表达式设置input样式

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

时间：2009-06-20 17:34:55 作者：互联网
　　用CSS的expression判断表达式设置input样式，简单，轻量级。缺点在于expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉  ……Orz…

　　代码：

div css xhtml xml Example Source Code Example Source Code [www.downcodes.com]
http://ww***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://ww***.org/1999/xhtml" >

    www.downcodes.com
    
    
    
    
    
    input
    {
    background-color:expression(th***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){(el***lassName)?el***lassName+=" "+ele.type:el***lassName=ele.type; el***tyle.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;
}










相关文章

相关应用

热门文章

猜你喜欢

返回顶部