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

Question

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

I tried to insert img tags into select-option tags, this will not work.

Please, help

thank

Answer 1

In Firefox, you can use a background image, but at least IE6 and IE7 do not support this. There is no pure html / css solution that will work consistently in all OS and browsers.

, , , Javascript , , . , Javascript, . .

, Javascript, ​​ Mootools , MavSelectBox

Answer 2

. . - - . - onchange , .

, option, - , , background-position-x background-position-y.

Answer 3

.

( "Utrustning" ) . , div, html, .

Answer 4

Try setting the images using backgroundCSS (either through styleor class). You will also need paddingor something similar so that the text does not overlap with the flags.

Answer 5

try it.

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 6

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

Alternatively, you can do this using <LI>HTML / CSS and a hidden form field.