Add a backgrpound image to the current option selected

Hi there,

Is it possible to add a background image to the current option selected in a drop down?

If so, what would be the best way to do this?


Yes, quite easy. The best way to do this would be to post example code for your drop down, so that we can help finish it off. :slight_smile:

If you mean you want a background image on the selected ‘option tag’ itself then that’s not possible in a cross browser way.

You can add a background colour to the option element with the selected attribute but it will not change when selected by the user.

option[selected]{background:red url(../images/arrow.gif) no-repeat 100% 50%}

<select name="test" id="test">
				<option value="test1">test1</option>
				<option selected value="test1">test2</option>
				<option value="test3">test3</option>

Chrome / webkit only show the background colour while Firefox also display the image. IE does neither and none of them will move the color to the user selection either.

If you want an image of the top level of the select then apply the image to the select itself. Browsers support will vary though.

Only way to achieve that level of customization to a “drop down” would be to replicate the functionality of a drop down using custom HTML replicating the various actions of a drop down and passing them through to a hidden drop down. For accessability the best way to handle it would be to swap the out the standard select element with the custom HTML widget using JavaScript. That way when JS is disabled the drop down is still accessible and the HTML widget only acts as an enhancement. There are some jQuery plugins that do this fyi though I don’t believe I’ve ever been forced to use any. I much rather keep it simple stupid but I know designers don’t allows see it that way… which they should but that is another topic altogether.