I'm trying to style the option tags contained in a select input. I want to do a "legend selection" So I have a color associated for each category available in the select input.
Now, I change the background color, but it render the reading of the text quite bad depending on how dark the legend color is.
So I was wondering if I could create a SVG image on the fly, and link it as a background image for each option. Just a simple colored square or a circle that I would align right or left with a no-repeat.
Am I dreaming or is it something that could be achieved ?
BTW: I'm using JQuery+D3 in my project, in case that could be helpful.
Edit: I found the following example, but it doesn't seem to work with option:
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
You can't reliable style a select element, even with simple CSS.
You should be able to do it with one of the custom select menu UI plugins available. For example there are a few for jQuery.