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

Question

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

Код:

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

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

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

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

Answer 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 , например. используя Выбирается .

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

Answer 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);

    };

Answer 3

Мое решение - использовать FontAwesome, а затем добавить изображения библиотеки в виде текста! Вам просто нужны юникоды, и они находятся здесь: Справочный файл FontAwesome для юникодов

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

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

Answer 4

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

Answer 5

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

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

Answer 7

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

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

Answer 8

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

Код и репозиторий Github здесь

Answer 9

Используется 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>

Answer 10

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