Добавить изображение в список выбора [дубликат]

У вас уже есть несколько ответов, которые предлагают использовать JavaScript / jQuery. Я собираюсь добавить альтернативу, которая использует только HTML и CSS без каких-либо JS.

Основная идея состоит в том, чтобы использовать набор переключателей и меток (которые будут активировать / деактивировать переключатели) и с CSS, будет отображаться только метка, связанная с выбранным переключателем. Если вы хотите разрешить выбор нескольких значений, вы можете достичь этого, используя флажки вместо переключателей.

Вот пример. Код может быть немного беспорядочным (особенно по сравнению с другими решениями):

.select-sim {
  width:200px;
  height:22px;
  line-height:22px;
  vertical-align:middle;
  position:relative;
  background:white;
  border:1px solid #ccc;
  overflow:hidden;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-sim:hover::after {
  content:"";
}

.select-sim:hover {
  overflow:visible;
}

.select-sim:hover .options .option label {
  display:inline-block;
}

.select-sim:hover .options {
  background:white;
  border:1px solid #ccc;
  position:absolute;
  top:-1px;
  left:-1px;
  width:100%;
  height:88px;
  overflow-y:scroll;
}

.select-sim .options .option {
  overflow:hidden;
}

.select-sim:hover .options .option {
  height:22px;
  overflow:hidden;
}

.select-sim .options .option img {
  vertical-align:middle;
}

.select-sim .options .option label {
  display:none;
}

.select-sim .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display:block;
  width:100%;
}

.select-sim:hover .options .option input + label {
  display:block;
}

.select-sim:hover .options .option input:checked + label {
  background:#fffff0;
}

<div class="select-sim" id="select-color">
  <div class="options">
    <div class="option">
      <input type="radio" name="color" value="" id="color-" checked />
      <label for="color-">
        <img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="red" id="color-red" />
      <label for="color-red">
        <img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="green" id="color-green" />
      <label for="color-green">
        <img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="blue" id="color-blue" />
      <label for="color-blue">
        <img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="yellow" id="color-yellow" />
      <label for="color-yellow">
        <img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="pink" id="color-pink" />
      <label for="color-pink">
        <img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="turquoise" id="color-turquoise" />
      <label for="color-turquoise">
        <img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
      </label>
    </div>
  </div>
</div>

Я попробовал несколько пользовательских выборок на основе jquery с изображениями, но никто не работал в гибких макетах. Наконец я пришел через Bootstrap-Select. После некоторых модификаций я смог создать этот код.

Код и github repo здесь

Для двухцветного изображения вы можете использовать Fontello и импортировать любой пользовательский глиф, который хотите использовать. Просто сделайте свое изображение в Illustrator, сохраните его в SVG и опустите на сайт Fontello, а затем загрузите свой собственный шрифт, готовый для импорта. Нет JavaScript!

Вы можете использовать iconselect.js; Значок / выбор изображения (combobox, dropdown)

Демо и загрузка; http://bug7a.github.io/iconselect.js/

[/g1]

Использование HTML,

<div id="my-icon-select"></div>

Использование Javascript;

    var iconSelect;

    window.onload = function(){

        iconSelect = new IconSelect("my-icon-select");

        var icons = [];
        icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
        icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
        icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});

        iconSelect.refresh(icons);

    };

Еще одно решение для перекрестного браузера jQuery для этой проблемы - http://designwithpc.com/Plugins/ddSlick , которое сделано именно для этого использования.

ОБНОВЛЕНИЕ: По состоянию на 2018 год это, похоже, работает сейчас. Протестировано в Chrome, Firefox, IE и Edge

<!DOCTYPE html>
<html>
<body>

<style>
select#newlocale option[value="volvo"]   { background-color: powderblue;   }
select#newlocale option[value="opel"]   { background-color: red;   }
select#newlocale option[value="audi"]   { background-color: green;   }
</style> 

<select id="newlocale">
  <option value="volvo"><div >Volvo</div></option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

У меня такая же проблема. Мое решение было направлением радиокнопки с изображением справа от него. Поскольку вы можете выбрать только одну опцию на радио, она работает (как) выбор.

Worket хорошо для меня. Надеюсь, это поможет кому-то другому.

Для тех, кто хочет отобразить значок и принять «черно-белое» решение, одна из возможностей заключается в использовании объектов символов:

   <select>
      <option>100 &euro;</option>
      <option>89 &pound;</option>
    </select>

. Расширение, ваши значки могут быть сохранены в пользовательском шрифте , Вот пример использования шрифта FontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

Одно из преимуществ заключается в том, что он не требует Javascript. Однако обратите внимание, что загрузка полного шрифта не замедляет загрузку вашей страницы.

Nota bene: Решение использовать фоновое изображение больше не работает в Firefox (по крайней мере, в версии 57 «Квант»):

<select>
  <option style="background-image:url(euro.png);">100</option>
  <option style="background-image:url(pound.png);">89</option>
</select>

Мое решение - использовать FontAwesome, а затем добавлять библиотечные изображения в текст! Вам просто нужны Юникоды, и они найдены здесь: FontAwesome Reference File forUnicodes

Вот пример фильтра состояния:

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''>&#xf039; &nbsp; All States</option>
<option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option>
<option value='paused' style='color:orange;'>&#xf04c; &nbsp; Paused</option>
<option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option>
</select>

Примечание. семейство шрифтов: Arial, FontAwesome; требуется присвоить в стиле для выбора, как указано в примере!