How do I change the selected element background color in a List box?

I have build myself a basic tabbed object selector with buttons, sprites and list boxes.

I'd like to control the font and background color of the selected element via CSS.

I have tried various pseudo classes like :active and :focus but I am not getting the result I want. Does anybody know how to do this?

You're looking for the option:checked pseudo-selector.

Thanks for the tip. Unfortunately it doesn't seem to work for me. I am going to experiment a bit more.

Looked into it some more and found option:checked only works when the list isn't actively selected.

It doesn't seem like there is a clean solution to this due to browser (Chrome/Safari) and CSS limitations. Sounds like it works in Firefox though.

developer.mozilla.org/en-US/docs/Web/HTML/Element/option

The consensus on the web seems to be that styling a list box is asking for trouble. I will use a simplified tabbed list box in the near future and switch something more custom when time permits.

Thanks for your continued support.