HTML SELECT - can you have multiple font colors in select field?

Question

Hi

Is it possible to have an HTML select field where the OPTION text is of different colors?

<select>
<option>Black_text (yellow_text)</option>
</select>

I tried using an CSS SPAN element to color the text but that doesn't seem to work.

Any ideas?

UPDATE: Note, I'm trying to have multiple font colors on the same OPTION row. I've seen quite a few tutorials on how to style the entire OPTION row but I'm trying to style elements within the same option row.

Answer 1

Try to style the option elements itself:

<option style="…">Label</option>

But I doubt that browsers support much styling of these elements.

---

Edit

I'm trying to have multiple font colors on the same OPTION row.

That’s not possible as the option element does only allow text as content:

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

Answer 2

You might take a look at http://www.netmechanic.com/news/vol4/design_no19.htm

Answer 3

You probably can't do it with a plain vanilla select list. However, it probably would be possible to use Javascript + HTML + CSS to make your own "select list" using just div and span elements and that correct onclick, and onmouseover javascript. Would be much more difficult, but if it's really important, you could probably get it to work.

Answer 4

Why dont you put a background image on every row like this:

<option style="background-image: multicolorimage.jpg>some text</option>

sorry, wrong answer. At first I didnt understand what you are trying to do so disregard my post :)