Styling <select> options via CSS and IE 7

Question

I want to style the actual items in a list box based on certain user input (adding new items, editing existing items, and then making them active/inactive). One thing I wanted to do was use bolding (for active) and italics (for edited items), by simply adding a css class to the list item in question (or taking it away as appropriate).

In Firefox, this work.

In IE7, none of it works.

Why? Is this a quirks mode thing, or did the Dark Gods of IE7, in their unspeakable and infinite madness, decree this must not be? Is Firefox violating the Geneva Convention in doing this?

Here is my css class for bolding purposes:

.active
{
    color:Black;
    font-weight: 600;
}

I tried "bolder" for font-weight as well, just as an attempt to be thorough. That didn't work, which I am sure will come as no surprise to more than one person here.

Answer 1

IE and firefox implement tags differently.

In IE, what you are asking for isn't possible.

Answer 2

You cannot do this at the moment. Multiple browsers don't support this feature. As an alternative, you can use javascript to replace a standard checkbox with a styled one.

Some jQuery select checkboxes to show the possibilities:

• http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/
• http://www.brainfault.com/2007/07/23/select-box-replacement/ (original post)
• http://theuiguy.blogspot.com/2008/09/select-box-factory-20-for-jquery.html
• http://www.scottdarby.com/2009/05/jquery-plugin-stylish-select-unobstrusive-select-box-replacement/

Answer 3

Many times that people want to style option elements, they really are wanting optgroups. Will that work for your needs? http://www.w3schools.com/tags/tag_optgroup.asp

If you must have full CSS control over the options, then most javascript libraries have a fully javascript-built select box simulator, which you can then style to your heart's content. http://www.ajaxupdates.com/jquery-select-box/

For me, history has shown that users don't care or even notice the extra styling. But it makes the designers happy :)