CSS expression judgment expression sets input style

Author：Eve Cole Update Time：2009-06-20 17:34:55

Use CSS expression to determine the expression to set the input style, which is simple and lightweight. The disadvantage is that FireFox does not support the expression judgment expression. The fatal thing is that you can only distinguish one (for example, in the example, you can only distinguish the text text box), don't try to set multiple, the following ones will overwrite the top ones... Orz...

Code:

Example Source Code [www.downcodes.com]

<!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.downcodes.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>

Another way:

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. Take out the attributes of input and assign them to className.
2. For expression, an insignificant attribute (here zoom) is used to trigger it. After processing what needs to be done, this attribute is overwritten to solve the efficiency problem of continuous execution of expression.

Code:

Example Source Code [www.downcodes.com]

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