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

CSS样式表
DIV和CSS排版中制作细线条的方法小结
在解决ul居中问题时想到的几点
网页编辑中CSS样式表技巧总结
一个老外弄的Clearing floats(清除浮动的方法)
常用的DIV+CSS的基本框架结构但不推荐都放一个div里
无js5款纯div+css制作的弹出菜单标准
超强推荐CSS打造经典鼠标触发显示选项
CSS网页布局入门教程5：二列宽度自适应
CSS网页布局入门教程6：左列固定，右列宽度自适应
CSS网页布局入门教程7：二列固定宽度居中
CSS网页布局入门教程9：用CSS设计网站导航——横向导航
CSS网页布局入门教程10：带当前标识的标签式横向导航
CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版
CSS网页布局入门教程12：纵向导航菜单
CSS网页布局入门教程13：下拉及多级弹出式菜单
CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
解读css发展历史
让用户自己控制网页字体的大小的css书写方法
CSS注释、命名、继承性、样式排序等CSS技巧的小结
CSS标签切换代码实例教程 比较漂亮

No. « 40 41 42 43 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 139 ::
收藏到网摘: 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>