Comment ajouter des images dans la liste de sélection?

J'ai une liste restreinte de genres.

Code:

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

Je veux utiliser une image dans la liste déroulante comme drop-down-icon.jpeg.

Je souhaite ajouter un bouton à la place de l'icône déroulante.

Comment faire ça?

Dans Firefox, vous pouvez simplement ajouter une image d'arrière-plan à l'option:

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

Mieux encore, vous pouvez séparer HTML et CSS comme ça

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

Dans d' autres navigateurs, le seul moyen de le faire serait d'utiliser une bibliothèque de widgets JS, comme par exemple l' interface utilisateur jQuery , par exemple en utilisant Selectable .

Depuis jQuery UI 1.11, le widget Selectmenu est disponible, ce qui est très proche de ce que vous voulez.

Ma solution est d'utiliser FontAwesome puis d'ajouter des images de la bibliothèque sous forme de texte! Vous avez juste besoin des Unicodes et ils se trouvent ici: Fichier de référence FontAwesome pour Unicodes

Voici un exemple de filtre d'état:

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

Notez la famille de polices: Arial, FontAwesome; doit être attribué dans le style pour sélectionner comme indiqué dans l'exemple!

Vous pouvez utiliser iconselect.js; Sélection d'icône / image (liste déroulante, liste déroulante)

Démo et téléchargement; http://bug7a.github.io/iconselect.js/

Utilisation HTML;

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

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

    };

Vous avez déjà plusieurs réponses qui suggèrent d'utiliser JavaScript / jQuery. Je vais ajouter une alternative qui n'utilise que HTML et CSS sans aucun JS.

L'idée de base est d'utiliser un ensemble de boutons radio et d'étiquettes (qui activeront / désactiveront les boutons radio), et avec le contrôle CSS que seule l'étiquette associée au bouton radio sélectionné sera affichée. Si vous souhaitez autoriser la sélection de plusieurs valeurs, vous pouvez y parvenir en utilisant des cases à cocher au lieu de boutons radio.

Voici un exemple. Le code peut être un peu plus compliqué (spécialement comparé aux autres solutions):

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

Une autre solution jQuery cross-browser pour ce problème est http://designwithpc.com/Plugins/ddSlick qui est fait exactement pour cette utilisation.

Avec les pays, les langues ou les devises, vous pouvez utiliser des émojis.

Fonctionne avec à peu près tous les navigateurs / systèmes d'exploitation prenant en charge l'utilisation des 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>

Pour une image à deux couleurs, vous pouvez utiliser Fontello et importer tout glyphe personnalisé que vous souhaitez utiliser. Créez simplement votre image dans Illustrator, enregistrez-la au format SVG et déposez-la sur le site Fontello, puis téléchargez votre police personnalisée prête à être importée. Pas de JavaScript!

J'ai essayé plusieurs sélections personnalisées basées sur jquery avec des images, mais aucune ne fonctionnait dans des mises en page réactives. Enfin, je suis tombé sur Bootstrap-Select. Après quelques modifications, j'ai pu produire ce code.

Code et dépôt github ici

Pour ceux qui souhaitent afficher une icône, et acceptant une solution "noir et blanc", une possibilité consiste à utiliser des entités caractères:

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

Par extension, vos icônes peuvent être stockées dans une police personnalisée. Voici un exemple utilisant la police FontAwesome : https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

L'un des avantages est qu'il ne nécessite aucun Javascript. Cependant, faites attention au fait que le chargement de la police complète ne ralentit pas le chargement de votre page.

Nota bene: La solution d'utiliser une image de fond ne semble plus fonctionner sous Firefox (du moins en version 57 "Quantum"):

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

Réponse gratuite Alvaros JS été un bon début pour moi, et j'ai vraiment essayé d'obtenir une réponse vraiment sans JS qui fournissait toujours toutes les fonctionnalités attendues d'un Select avec des images, mais malheureusement, l'imbrication des formulaires a été la chute. Je poste deux solutions ici; ma solution principale qui utilise 1 ligne de JavaScript, et une solution totalement sans JavaScript qui ne fonctionnera pas dans un autre formulaire, mais pourrait être utile pour les menus de navigation.

Malheureusement, il y a un peu de répétition dans le code, mais quand vous pensez à ce qu'est un Select, cela a du sens. Lorsque vous cliquez sur une option, il copie ce texte dans la zone sélectionnée, c'est-à-dire que cliquer sur 1 des 4 options ne changera pas les 4 options, mais le haut répètera maintenant celle sur laquelle vous avez cliqué. Pour ce faire avec des images, il faudrait JavaScript, orrrr ... vous dupliquez les entrées.

Dans mon exemple, nous avons une liste de jeux (Produits), qui ont des versions. Chaque produit peut également avoir des extensions, qui peuvent également avoir des versions. Pour chaque produit, nous donnons à l'utilisateur une liste de chaque version s'il y en a plus d'une, avec une image et un texte spécifique à la version.

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

En utilisant JS pour la désélection de la case à cocher, nous pouvons avoir plusieurs instances sur un formulaire. Ici, j'ai étendu pour afficher une liste d'extensions, qui ont également la même logique autour des versions.

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

Bien sûr, cela nécessite un peu de CSS, que je n'ai inclus dans ce JSFiddle que pour réduire la taille de cette réponse déjà massive. J'ai utilisé Bootstrap 4 pour réduire la quantité nécessaire et pour lui permettre de s'intégrer avec d'autres contrôles Bootstrap et toutes les personnalisations de site qui ont été effectuées.

Les images sont réglées à 75px, mais cela peut facilement être changé en 5 lignes dans .rich-selectet.rich-select-option-body img

J'ai eu le même problème. Ma solution était un foreach de boutons radio, avec l'image à droite de celui-ci. Puisque vous ne pouvez choisir qu'une seule option à la radio, cela fonctionne (comme) une sélection.

Travaillez bien pour moi. J'espère que cela peut aider quelqu'un d'autre.

Cela utilise ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

La ressource de données est json. Mais vous n'avez pas besoin d'utiliser json. Si vous le souhaitez, vous pouvez utiliser avec css.

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

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

HTML

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

Scénario

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

MISE À JOUR: À partir de 2018, cela semble fonctionner maintenant. Testé dans Chrome, Firefox, IE et 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>