¿Cómo agregar imágenes en la lista de selección?

Tengo una lista selecta de géneros.

Código:

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

Quiero usar una imagen en la lista desplegable como drop-down-icon.jpeg.

Quiero agregar un botón en lugar del icono desplegable.

¿Como hacer eso?

En Firefox puedes agregar una imagen de fondo a la opción:

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

Mejor aún, puede separar HTML y CSS así

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

En otros navegadores, la única forma de hacerlo sería usar alguna biblioteca de widgets JS, como por ejemplo jQuery UI , por ejemplo, usando Seleccionable .

Desde jQuery UI 1.11, el widget Selectmenu está disponible, que está muy cerca de lo que desea.

¡Mi solución es usar FontAwesome y luego agregar imágenes de la biblioteca como texto! Solo necesita los Unicodes y se encuentran aquí: FontAwesome Reference File forUnicodes

Aquí hay un ejemplo 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>

Tenga en cuenta la familia de fuentes: Arial, FontAwesome; ¡se requiere que se asigne en estilo para seleccionar como se da en el ejemplo!

Puede usar iconselect.js; Selección de icono / imagen (cuadro combinado, menú desplegable)

Demo y descarga; 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);

    };

Ya tiene varias respuestas que sugieren usar JavaScript / jQuery. Voy a agregar una alternativa que solo usa HTML y CSS sin ningún JS.

La idea básica es usar un conjunto de botones de radio y etiquetas (que activarán / desactivarán los botones de radio), y con el control CSS, solo se mostrará la etiqueta asociada al botón de radio seleccionado. Si desea permitir la selección de múltiples valores, puede lograrlo mediante el uso de casillas de verificación en lugar de botones de radio.

Aquí hay un ejemplo. El código puede ser un poco más desordenado (especialmente en comparación con las otras soluciones):

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

Otra solución de navegador cruzado de jQuery para este problema es http://designwithpc.com/Plugins/ddSlick, que está hecho exactamente para este uso.

Con países, idiomas o moneda puede usar emojis.

Funciona con casi todos los navegadores / sistemas operativos que admiten el 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 una imagen de dos colores, puede usar Fontello e importar cualquier glifo personalizado que desee usar. Simplemente haga su imagen en Illustrator, guárdela en SVG y suéltela en el sitio de Fontello, luego descargue su fuente personalizada lista para importar. ¡Sin JavaScript!

Intenté varias selecciones personalizadas basadas en jquery con imágenes, pero ninguna funcionó en diseños receptivos. Finalmente me encontré con Bootstrap-Select. Después de algunas modificaciones pude producir este código.

Código y repositorio github aquí

Para aquellos que desean mostrar un icono y aceptan una solución "en blanco y negro", una posibilidad es utilizar entidades de caracteres:

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

Por extensión, sus iconos se pueden almacenar en una fuente personalizada. Aquí hay un ejemplo usando la fuente FontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

Una ventaja es que no requiere ningún Javascript. Sin embargo, tenga en cuenta que cargar la fuente completa no ralentiza la carga de su página.

Nota bene: La solución de usar una imagen de fondo ya no parece funcionar en Firefox (al menos en la versión 57 "Quantum"):

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

La respuesta gratuita de Alvaros JS fue un gran comienzo para mí, y realmente intenté obtener una respuesta verdaderamente libre de JS que aún ofreciera toda la funcionalidad esperada de un Select con imágenes, pero lamentablemente los formularios de anidación fueron la caída. Estoy publicando dos soluciones aquí; mi solución principal que usa 1 línea de JavaScript, y una solución totalmente libre de JavaScript que no funcionará dentro de otro formulario, pero podría ser útil para los menús de navegación.

Desafortunadamente, hay un poco de repetición en el código, pero cuando piensas en lo que hace un Select tiene sentido. Cuando hace clic en una opción, copia ese texto en el área seleccionada, es decir, hacer clic en 1 de 4 opciones no cambiará las 4 opciones, pero la parte superior ahora repetirá la que hizo clic. Hacer esto con imágenes requeriría JavaScript, orrrr ... duplicar las entradas.

En mi ejemplo, tenemos una lista de juegos (Productos), que tienen versiones. Cada producto también puede tener expansiones, que también pueden tener versiones. Para cada Producto, le damos al usuario una lista de cada versión si hay más de una, junto con una imagen y un texto específico de la versión.

<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 la deselección de la casilla de verificación podemos tener múltiples instancias en un formulario. Aquí me he extendido para mostrar una lista de expansiones, que también tienen la misma lógica en torno a las versiones.

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

Por supuesto, esto requiere un poco de CSS, que solo he incluido en este JSFiddle para reducir el tamaño de esta respuesta ya masiva. He usado Bootstrap 4 para reducir la cantidad necesaria y también para permitir que se ajuste a otros controles de Bootstrap y cualquier personalización del sitio que se haya realizado.

Las imágenes están configuradas en 75 píxeles, pero esto se puede cambiar fácilmente en 5 líneas .rich-selecty.rich-select-option-body img

Tengo el mismo problema. Mi solución fue un foreach de botones de radio, con la imagen a la derecha. Como solo puede elegir una sola opción en la radio, funciona (como) una selección.

Worket bien para mí. Espero que pueda ayudar a alguien más.

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

El recurso de datos es json. Pero no necesitas usar json. Si quieres puedes usar con css.

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

Ejemplo de Json: http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

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

Guión

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

ACTUALIZACIÓN: A partir de 2018, esto parece funcionar ahora. Probado en Chrome, Firefox, IE y 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>