Изображения в <select>
 

Занимаюсь реализацией выпадающего списка флагов стран. За основу взял идею отсюда:
http://archives.kh.ua/battle1.htm
Немного переиначил под себя и исправил вывод изображения в поле сразу после открытия страницы. Но вот обнаружил досадную проблему - изображения в выпадающем списке видно только в FF. В IE, Opera и GC не работает.
Помогите найти решение проблемы.

<style type="text/css">
    .icon {
        height: 36px;
        width:  36px;
        background-repeat: no-repeat;
        padding-top: 1px;
        padding-bottom: 1px;
        background-position: right;
    }


</style>

<script type="text/javascript" language="javascript">
 function doIcon( pVal)
 {
  var obj = document.getElementById( 'imgCombo');
  var img = 'imgselect/' + pVal + '.gif';
  obj.style.background = "url( '" + img + "') no-repeat";
 }
</script>

<form>
 <select id='imgCombo' onChange="javascript: doIcon( this.value );" style="width: 65px;" class="icon">
                 <option style="background-image: url(imgselect/01.gif);" class="icon" value="01">2</option> 
                 <option style="background-image: url(imgselect/02.gif);" class="icon" value="02">3</option> 
                 <option style="background-image: url(imgselect/03.gif);" class="icon" value="03">4</option>
                 <option style="background-image: url(imgselect/04.gif);" class="icon" value="04">5</option>
                 <option style="background-image: url(imgselect/05.gif);" class="icon" value="05">4</option>
                 <option style="background-image: url(imgselect/06.gif);" class="icon" value="06">4</option>
 </select>
</form>

Скажите, а зачем переделывать то, что уже работает?

Оно работает только в Firefox. В остальных браузерах не работает.

klev2004,
Проще делать список через li - c занесением по клику кода флага в единственный input type=text , a c li мон выпендривацо как угодно и фоном флажки или рядом изо

Такое чувство, что параметр background: url(...); не должен работать в <select><option>
Кто что скажет по этому поводу?

Найдено такое свойство:
select
{
-webkit-appearance: none;
}
Благодаря ему, изображение стало показываться в select в свернутом виде. В открытом списке выбора изображений все еще нет.

Интересно как если браузер не поддерживает эту возможность?:-?
Чем вам методика использующаяся в джиквери ui не подходит?
Делаете выпадающий список или что там у вас обеспечивающее функциональность без подключения js,а затем стилизуете его заменой на li и селекторов css если необходимо

dmitriymar, спасибо за наводку, пока не понимаю о чем говорите, погуглю.

мне кажется об этом:
http://harvesthq.github.com/chosen/

http://www.books.ru/books/jquery-pod...script-619339/
книга есть в свободной скачке
раздел jquery UI -там есть подробное описание как в джиквери организовываются подобные пользовательские элементы -рассматривается общий механизм их формирования без привязки к джиквери

<select> редендится браузером и применять к нему какие-то свойство (даже элементарные свойства css) часто-густо бесполезно некроссбраузено. Гуглите "имитация select" или типа того, если хотите посмотреть рабочие примеры.