How to Theme HTML Form Option, Input and Button Based On Value or Type Using CSS

Ever wanted to them a form option, input or button based on either the value or type? Well, there's a way and it's surprisingly pretty easy.

Simply declare the tag as normal, then add the desired value or text in brackets. That's it!

I've wondered for a while if this was even possible and after running across a Drupal comment for adding some cool CSS stuff to a theme project, the author posted some CSS that showed this method. I thought: "It looks like it will work..." so I tried it and volia! Instead of bookmarking it and trying to dig to find it later, I decided to give myself a short tutorial on how to make it happen.

Example:
HTML code

<select>
 <option value="male">Male Color</option>
 <option value="female">Female Color</option>
</select>

CSS code

option[value="male"] {background: LightBlue;}
option[value="female"] {background: Pink; color: MediumVioletRed;}

The Proof Is In the Pudding...

Pretty cool! I have no idea which browsers support this, but I know newer versions of Firefox and Chrome do... You could also use this to apply background images and some other cool things to them if you wanted. Pretty much any HTML tag that uses an attribute with a pre-defined value, can probably be themed.

Unfortunately you can't apply :hover to this stuff :-/ That has to be done with ul -> li workarounds.