Stupid Form Tricks - Styling Input Elements Using Attribute Selectors

for Netscape 6+, Mozilla 1.0+, Opera 7+ , probably Safari (untested)

VERY buggy with Netscape 7.1

Attibute selectors has been part of the W3 recommendation for, what, nearly 5 years now? And still no support from IE. How could the go this long without providing support for something that is such a convenience to developers? It's criminal; it really is.

Let's look at how easy it is to use attribute selectors:

<style>
/* This matches any input element that has the "type" attribute */
input[type] {background-color:#fcc }

/* This matches any input element whose "type" attribute value exactly equals "text" */
input[type="text"] {background-color:#ccf} 

/* The next matches any input element whose attribute value is a list of 
space-separated values, one of which is exactly equal to "Here". 
THIS WORKS WITH NETSCAPE 6 ONLY! and N6 doesn't seem to treat the value as case sensitive. 
*/
input[value~="here"] {border:2px dashed;background-color:#ff0} 
<style>

<form name="StyleDemo">

Red	Green	Blue
Left	Center	Right
Name
E-mail

</form>

Simple isn't it?

Don't forget, this works with any attribute such as width, colspan, src, etc., so it's usefulness is not limited to forms.

---

PXL8 2004