How to include images for <selection><option>?

Question

Hi

I have a list of countries displayed inside the select-tag option-tag tags, what I'd like to do is include the country's flag next to its name.

I tried to insert img tags inside the select-option tags, it doesn't work.

Please help

Thank

Answer 1

Try to set images with background CSS (either through style or class). You'd also want padding or something similar so that text does not overlap with the flags.

Answer 2

try this ..

css

<style>
  .test1 { background:url(../images/folder-blue.gif) no-repeat; padding-left:16px;}
</style>

<select>
    <option class="test1">Test 1</option>
    <option class="test2">Test 2</option>
    <option class="test3">Test 3</option>
</select>

Answer 3

In Firefox, you can use background-image but at least IE6 and IE7 don't support this. There is no pure html/css solution that will work consistently across all OS and browsers.

The only thing you can do is create the select box without images and then use Javascript to replace that box with a custom set of inputs, which will look like a select box but allow more customisation. Then if the user has Javascript turned off, they will be presented with the standard select box without images. Otherwise, they will see the pretty select box.

This will be quite complicated so I suggest you use a Javascript framework, such as Mootools and a plugin for this very purpose, such as MavSelectBox

Answer 4

<select>
    <option style="background-image: url('images/us.gif') no-repeat left center; padding-left: 20px;">USA</option>
    <option style="background-image: url('images/fr.gif') no-repeat left center; padding-left: 20px;">France</option>
</select>

Alternately, you can do it using <LI>'s, HTML/CSS and a hidden form field.

Answer 5

This is NOT possible. You cannot include images inside a selection drop-down or set separate backgrounds for options. The only way you could do something like this is to build your own selection drop-down element. The most common way is to simply set an onchange event for the selection element that will change an image next to it based on the option that is currently selected.

The ONLY background properties available for an option element are background-attachment, background-color, background-position-x, and background-position-y.

Answer 6

That's not possible with a standard dropdown.

Take a look at the color ("färger") selection dropdown here. We just made a replacement for the dropdown that folds out a div, so it can contain any html you like.

Answer 7

Thanks everyone, tried the suggestions up, looks like javascript is needed :)