Menu
I know how to have pictures show up next to the options in a HTML dropdown form element using the CSS background-image property.
However, the images do not show up on the selected element. Is there any way to do this (preferably using only CSS)?
EDIT:
Here is an example of the working code for the list elements. However, when the drop-down is closed, you only see the text of the selected element, without the image:
<select name="form[location]"> <option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option> <option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option> <option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option> <option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option> <option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option> <option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option> <option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option> <option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option> <option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option> <option value="ar" style="background: url(img/flags/ar.gif) no-repeat; padding-left: 20px;" selected="selected">Argentina</option> [...] - I think you get the idea. </select> 
542
q=html+select+image. as a general solution: if you can, get your icons together as SVGs, import them into a font of your choice into the personal Unicode range, use that font in your <option> s; supported by everything up from IE 8.0, small and simple.
we can add animage in select options in html. but, we cannot directly achieve it with the HTML alone. To display the images in the select drop-down we have to use javascript libraries. We can add an image in select options using "select2" jQuery library.
To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property.
To set a JavaScript array as options for a select element, we can use the options. add method and the Option constructor. to add the select drop down. to select the select element with querySelector .
Doing this in a cross-browser way is going to be very challenging, and I suspect, impossible.
Instead, you might want to try using a widget that looks and acts like a select box, but is made w/ HTML & Javascript.
Here's one way to do it with jQuery:
jquery.combobox
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
