Como adicionar imagens na lista de seleção?

Eu tenho uma lista selecionada de sexos.

Código:

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

Quero usar uma imagem na lista suspensa como drop-down-icon.jpeg.

Quero adicionar um botão no lugar do ícone suspenso.

Como fazer isso?

No Firefox, você pode adicionar uma imagem de fundo à opção:

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

Melhor ainda, você pode separar HTML e CSS assim

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

Em outros navegadores, a única maneira de fazer isso seria usar alguma biblioteca de widgets JS, como, por exemplo, jQuery UI , por exemplo, usando Selectable .

No jQuery UI 1.11, o widget Selectmenu está disponível, muito próximo ao desejado.

Minha solução é usar o FontAwesome e adicionar imagens da biblioteca como texto! Você só precisa dos Unicodes e eles podem ser encontrados aqui: FontAwesome Reference File forUnicodes

Aqui está um exemplo de filtro de estado:

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

Observe a família de fontes: Arial, FontAwesome; é necessário que seja atribuído com estilo para selecionar como dado no exemplo!

Você pode usar o iconselect.js; Seleção de ícone / imagem (caixa de combinação, lista suspensa)

Demo e download; http://bug7a.github.io/iconselect.js/

Uso de HTML;

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

Uso de 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);

    };

Você já tem várias respostas que sugerem o uso de JavaScript / jQuery. Vou adicionar uma alternativa que usa apenas HTML e CSS sem JS.

A idéia básica é usar um conjunto de botões de opção e rótulos (que ativam / desativam os botões de opção) e, com o controle CSS, apenas a etiqueta associada ao botão de opção selecionado será exibida. Se você deseja permitir a seleção de vários valores, pode obtê-lo usando caixas de seleção em vez de botões de opção.

Aqui está um exemplo. O código pode ser um pouco mais confuso (especialmente em comparação com as outras soluções):

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

Outra solução entre navegadores jQuery para esse problema é http://designwithpc.com/Plugins/ddSlick, que é feita exatamente para esse uso.

Com países, idiomas ou moeda, você pode usar emojis.

Funciona com praticamente todos os navegadores / sistemas operacionais que suportam o uso de emojis.

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>

Para uma imagem de duas cores, você pode usar o Fontello e importar qualquer glifo personalizado que deseja usar. Faça sua imagem no Illustrator, salve no SVG e solte-a no site Fontello e faça o download da fonte personalizada pronta para importar. Sem JavaScript!

Tentei várias seleções personalizadas baseadas em jquery com imagens, mas nenhuma funcionou em layouts responsivos. Finalmente eu vim através do Bootstrap-Select. Após algumas modificações, consegui produzir esse código.

Código e repositório do github aqui

Para aqueles que desejam exibir um ícone e aceitar uma solução "preto e branco", uma possibilidade é usar entidades de caracteres:

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

Por extensão, seus ícones podem ser armazenados em uma fonte personalizada. Aqui está um exemplo usando a fonte FontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

Um benefício é que ele não requer Javascript. No entanto, preste atenção que o carregamento da fonte completa não diminui o carregamento da sua página.

Nota bene: A solução do uso de uma imagem de plano de fundo não parece mais funcionar no Firefox (pelo menos na versão 57 "Quantum"):

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

Resposta gratuita do Alvaros JS foi um grande começo para mim, e eu realmente tentei obter uma resposta verdadeiramente livre de JS que ainda fornecia toda a funcionalidade esperada de um Select com imagens, mas, infelizmente, aninhar formulários foi a queda. Estou postando duas soluções aqui; minha solução principal que usa 1 linha de JavaScript e uma solução totalmente livre de JavaScript que não funcionará em outro formulário, mas pode ser útil para os menus de navegação.

Infelizmente, há um pouco de repetição no código, mas quando você pensa sobre o que um Select faz, faz sentido. Quando você clica em uma opção, ele copia esse texto para a área selecionada, ou seja, clicar em 1 das 4 opções não altera as 4 opções, mas a parte superior agora repete a que você clicou. Para fazer isso com imagens, seria necessário JavaScript, orrrr ... você duplica as entradas.

No meu exemplo, temos uma lista de jogos (produtos), que têm versões. Cada produto também pode ter expansões, que também podem ter versões. Para cada produto, fornecemos ao usuário uma lista de cada versão, se houver mais de uma, juntamente com um texto específico da imagem e da versão.

<h4>@Model.Name</h4>
@if (Model.Versions.Count == 1)
{
    <div class="rich-select-option-body pl-2">
        <img src="@Model.Versions[0].ImageUrl" alt="">@Model.Versions[0].VersionName (@Model.Versions[0].Year)
    </div>
}
else
{
    <h5>Select the version</h5>
    <div class="rich-select custom-select">
        <div class="rich-select-dropdown">
            @foreach (var version in Model.Versions)
            {
                <div class="rich-select-option">
                    <input type="radio" name="game" id="[email protected]@version.VersionId" @if (version == Model.Versions.First()) { @Html.Raw(" checked") ; } />
                    <div class="rich-select-option-body">
                        <label tabindex="-1">
                            <img src="@version.ImageUrl" alt="">@version.VersionName (@version.Year)
                        </label>
                    </div>
                </div>
            }
        </div>
        <input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
        <label for="rich-select-dropdown-button"></label>
        <div class="rich-select-options">
            @foreach (var version in Model.Versions)
            {
                <div class="rich-select-option">
                    <div class="rich-select-option-body">
                        <label for="[email protected]@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
                            <img src="@version.ImageUrl" alt=""> @version.VersionName (@version.Year)
                        </label>
                    </div>
                </div>
            }
        </div>
    </div>
}

Usando JS para desmarcar a caixa de seleção, podemos ter várias instâncias em um formulário. Aqui estendi para mostrar uma lista de expansões, que também têm a mesma lógica nas versões.

<h5 class="mt-3">Include Expansions?</h5>
@foreach (var expansion in Model.Expansions)
{
    <div class="form-row">
        <div class="custom-control custom-checkbox w-100">
            <input type="checkbox" class="expansion-checkbox custom-control-input" id="[email protected]">
            <label class="custom-control-label w-100" for="[email protected]">

                @if (expansion.Versions.Count == 1)
                {
                    <div class="rich-select-option-body pl-2">
                        <img src="@expansion.ImageUrl" />@expansion.Name: @expansion.Versions[0].VersionName (@expansion.Versions[0].Year)
                    </div>
                }
                else
                {
                    <div class="rich-select custom-select">
                        <div class="rich-select-dropdown">
                            @foreach (var version in expansion.Versions)
                            {
                                <div class="rich-select-option">
                                    <input type="radio" name="[email protected]" id="[email protected]@version.VersionId" @if (version == expansion.Versions.First()) { @Html.Raw(" checked") ; } />
                                    <div class="rich-select-option-body">
                                        <label tabindex="-1">
                                            <img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
                                        </label>
                                    </div>
                                </div>
                            }
                        </div>

                        <input type="checkbox" id="[email protected]" class="rich-select-dropdown-button" />
                        <label for="[email protected]"></label>
                        <div class="rich-select-options">
                            @foreach (var version in expansion.Versions)
                            {
                                <div class="rich-select-option">
                                    <div class="rich-select-option-body">
                                        <label for="[email protected]@version.VersionId" tabindex="-1" onclick="document.getElementById('[email protected]').click();">
                                            <img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
                                        </label>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                }
            </label>
        </div>
    </div>

É claro que isso requer um pouco de CSS, que eu incluí apenas neste JSFiddle para reduzir o tamanho dessa resposta já massiva. Usei o Bootstrap 4 para reduzir a quantidade necessária e também para permitir que ele se encaixe em outros controles do Bootstrap e em qualquer personalização do site que tenha sido feita.

As imagens estão definidas para 75px, mas isso pode ser facilmente alterado em 5 linhas .rich-selecte.rich-select-option-body img

Eu tenho o mesmo problema. Minha solução foi um foreach de botões de opção, com a imagem à direita. Como você só pode escolher uma opção no rádio, funciona (como) uma seleção.

Worket bem para mim. Espero que possa ajudar outra pessoa.

Isso está usando o ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

O recurso de dados é json. Mas você não precisa usar o json. Se você quiser, pode usar com css.

Exemplo de CSS: https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

Exemplo Json: http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

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

Roteiro

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

ATUALIZAÇÃO: A partir de 2018, isso parece funcionar agora. Testado no Chrome, Firefox, IE e 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>