Изображение в элементе SELECT

Я знаю, как показывать снимки рядом с параметрами в выпадающем элементе HTML с использованием свойства background-image CSS.

Однако изображения не отображаются на выбранном элементе. Есть ли способ сделать это (желательно, используя только CSS)?

EDIT:

Вот пример рабочего кода для элементов списка. Однако, когда раскрывающийся список закрыт, вы видите только текст выбранного элемента без изображения:

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

Ответы

Ответ 1

Выполнение этого в кросс-браузерном способе будет очень сложным, и я подозреваю, что это невозможно.

Вместо этого вы можете попробовать использовать виджет, который выглядит и действует как поле выбора, но создается с помощью HTML и Javascript.

Здесь один из способов сделать это с помощью jQuery:

jquery.combobox

Ответ 2

Я согласен с Николаидом. Выполнение этого строго с помощью HTML и CSS не будет работать.

Вы хотите использовать технику прогрессивного улучшения, чтобы разместить на странице регулярное поле выбора для пользователей, которые не используют javascript или используют устройства чтения с экрана и т.п., а затем используйте javascript для замены окна выбора с помощью более красивого, fancier.