Как включить изображения для <selection><option>?

Question

У меня есть список стран, отображаемых внутри тегов option-tag, и я хотел бы добавить флаг страны рядом с его именем.

Я пытался вставить теги img в теги select-option, он не работает.

Пожалуйста, помогите

Спасибо

Answer 1

В Firefox вы можете использовать background-image, но по крайней мере IE6 и IE7 не поддерживают это. Не существует чистого решения html / css, которое бы работало согласованно во всех ОС и браузерах.

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

Это будет довольно сложно, поэтому я предлагаю вам использовать Javascript Framework, такой как Mootools , и плагин для этой цели, такой как MavSelectBox

Answer 2

Это невозможно при стандартном раскрывающемся списке.

Взгляните на раскрывающийся список выбора оборудования ("Utrustning") здесь . Мы только что сделали замену раскрывающемуся списку, который раскладывает div, поэтому он может содержать любой HTML-файл, который вам нравится.

Answer 3

Это НЕ возможно. Вы не можете включать изображения в выпадающий список или устанавливать отдельные фоны для параметров. Единственный способ сделать что-то подобное - создать собственный выпадающий элемент выбора. Наиболее распространенный способ - просто установить событие onchange для элемента выбора, который изменит изображение рядом с ним, основываясь на выбранной опции.

Свойства фона ONLY , доступные для элемента option: background-attachment, background-color, background-position-x и background-position-y.

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>

Кроме того, вы можете сделать это, используя <LI>, HTML / CSS и скрытое поле формы.

Answer 5

попробуйте это ..

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

Попробуйте установить изображения с помощью background CSS (либо через style, либо class). Вы также хотели бы padding или что-то подобное, чтобы текст не перекрывался с флагами.