当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS expression判断表达式设置input样式

CSS样式表
分页显示之超级提速版
兼容多浏览器实现半透明(Opera ie firefox)
解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
utf8和unicode编码究竟是什么关系？有何区别?
XHTML下css+div布局总结 超强推荐
在IE下拖动滚动条时border消失的解决方法
CSS中常用的单位
有关表格边框的css语法整理(1)
中文排版CSS心得
一个针对IE7的CSS Hack
css也疯狂! 用background 插入flash播放器
如何解决下拉菜单被flash覆盖的问题
网页中关闭IE的图像工具栏和XP主题
解决IE升级后Flash线框问题
em px的关系
在iframe中隐藏横向滚动条的方法大全
Iframe自适应其加载的内容高度
固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
IE Bug--浮动对象外补丁的双倍距离的解决方法
解决IE7以下版本不支持无A状态伪类的几种方法

No. « 33 34 35 36 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 129 ::
收藏到网摘: n/a

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