Как добавить изображения в список выбора?

У меня есть выбранный список полов.

код:

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>

Я хочу использовать изображение в раскрывающемся списке как drop-down-icon.jpeg.

Я хочу добавить кнопку вместо выпадающего значка.

Как это сделать?

Ответ 1

В Firefox вы можете просто добавить фоновое изображение к опции:

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select>

Еще лучше, вы можете отделить HTML и CSS как

HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>

CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

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

Из jQuery UI 1.11 доступен Selectmenu, который очень близок к тому, что вы хотите.

Ответ 2

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

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

Использование 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);

    };

Ответ 3

Мое решение - использовать 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; требуется назначить в стиле для выбора, как указано в примере!

Ответ 4

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

Ответ 5

У вас уже есть несколько ответов, которые предлагают использовать 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>

Ответ 6

Со странами, языками или валютой вы можете использовать эмодзи.

Работает практически со всеми браузерами/ОС, поддерживающими использование смайликов.

select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

<select name="countries">
    <option value="NL">🇳🇱&emsp;Netherlands</option>
    <option value="DE">🇩🇪&emsp;Germany</option>
    <option value="FR">🇫🇷&emsp;France</option>
    <option value="ES">🇪🇸&emsp;Spain</option>
</select>

<br /><br />

<select name="currency">
    <option value="EUR">🇪🇺&emsp;€&emsp;EUR&emsp;💶</option>
    <option value="GBP">🇬🇧&emsp;£&emsp;GBP&emsp;💷</option>
    <option value="USD">🇺🇸&emsp;$&emsp;USD&emsp;💵</option>
    <option value="YEN">🇯🇵&emsp;¥&emsp;YEN&emsp;💴</option>
</select>

Ответ 7

Edit

Этот ответ был здесь более двух лет. Я думаю, что это уже не лучший вариант, доступный сейчас. Простой поиск Google в GitHub принесет вам несколько вариантов.

9 ноября 2017 г.

~~ddSlick~~

Свободный легкий плагин jQuery, который позволяет вам создать пользовательский снимок с изображениями и описанием.

Ответ 8

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

Код и github repo здесь

Ответ 9

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

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

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

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

Примечание: решение об использовании фонового изображения больше не работает в Firefox (по крайней мере, в версии 57 "Quantum"):

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

Ответ 10

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

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

Ответ 11

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

Ответ 12

Это использует MS-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

Ресурс данных JSON. Но вам не нужно использовать JSON. Если вы хотите, вы можете использовать с CSS.

Пример Css: https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

Пример Json: http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

скрипт

<script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>

Ответ 13

Используйте https://select2.org/ - шаблоны https://select2.org/dropdown#templating

Простой в использовании и индивидуальный стиль, рекомендуем!

Ответ 14

ОБНОВЛЕНИЕ: По состоянию на 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>