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

I have a list of countries displayed inside the sel开发者_开发知识库ect-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

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

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.

That's not possible with a standard dropdown.

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

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>

<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.