CSS or jQuery: text in two different colors in <select> dropdown menu

Question

I'd like to have the text in the <option> elements of a <select> menu displaying in two different colours, like so:

I've been searching around for something definitive and mainly finding one or two really old threads indicating that it can't be done.

I appreciate that a CSS-only solution might be out of the question, and I'm already using jQuery customSelect to style the dropdown, so using jQuery is definitely on the table; however this particular plugin only seems to affect/replace the selected top-level element and not the dropdown items.

If anyone has any suggestions or solutions - the lighter the better - that would be great.

Answer 1

You cannot do this unless you completely replace the <select> element with a fully custom menu implementation. The spec defines that the content model of each option is Text, which does not allow for the HTML elements that you would need to implement the colors. jQuery can't help you there because there is no wiggle room whatsoever.

If you are willing to consider a custom implementation then select2 is an excellent choice.

Answer 2

Can you write some code in a page like:

<option>Gamma <span>Delta</span></option>

Then you write next code in css stylesheet:

option span{
color:green;font-weight:bold;
}

Christian