Add span inside <option> tag and style it

Question

I would like to add span before text inside <option> tag and style it (it should represent color in select menu). However it does't seem to work...

How to make this piece of code working?

JsFiddle: http://jsfiddle.net/bartuz/08e0L9j2/2/

It seems example above does work in Firefox only... what about other browsers?

Solution

This will depend on your web browser. In the latest version of Firefox, it works fine. However, it doesn't work in the latest version of Internet Explorer.

Your question is a bit loaded - and I suspect that's why it got downvoted - you are asking why it's not working, rather than how to get it to work.

It's not working because it's not really a supported feature of selectboxes (yet!)

I'd suggest you look into using JavaScript to achieve the same result (and specifically, the jQuery UI selectmenu) which should support this type of 'advanced' select box.