web-dev-qa-db-fra.com

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

J'ai une liste de sélection de genres.

Code:

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

Je veux utiliser une image dans la liste déroulante sous forme de menu déroulant icon.jpeg.

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

Comment faire ça?

htmlcss
117
Mayur

Dans Firefox, vous pouvez simplement ajouter une image d’arrière-plan à une 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 autres navigateurs, le seul moyen de le faire serait d'utiliser une bibliothèque de widgets JS, comme par exemple jQuery UI , par exemple. en utilisant Sélectionnable.

Dans jQuery UI 1.11, Le menu Sélectionner est disponible, ce qui est très proche de ce que vous voulez.

155
vartec

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

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

enter image description here

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

    };
24
bugra ozden

Ma solution consiste à utiliser FontAwesome, puis à ajouter des images de bibliothèque sous forme de texte! Vous avez simplement besoin des Unicodes. 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 le font-family: Arial, FontAwesome; doit obligatoirement être assigné en style pour select comme indiqué dans l'exemple!

17
Tarik

Une autre solution multi-navigateur jQuery pour résoudre ce problème est http://designwithpc.com/Plugins/ddSlick qui est conçue pour cet usage.

16
jerrygarciuh

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

L'idée de base est d'utiliser un ensemble de boutons radio et d'étiquettes (qui activera/désactivera les boutons radio), et avec le contrôle CSS, 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>

15
Alvaro Montoro

Avec les pays, les langues ou les devises, vous pouvez utiliser des émoticônes.

Fonctionne avec à peu près tous les navigateurs/systèmes d’exploitation prenant en charge les émoticônes.

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>

4
Tim

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 arrivé à travers Bootstrap-Select. Après quelques modifications, j'ai pu produire ce code.

Code et github repo ici

 enter image description here

1
aslam parvaiz

Pour ceux qui souhaitent afficher une icône et accepter une solution "noir et blanc", une possibilité consiste à utiliser des entités de 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 pas de Javascript . Toutefois, faites attention à ce que le chargement de la police complète ne ralentisse pas le chargement de votre page.

Nota bene: La solution consistant à utiliser une image d'arrière-plan ne semble plus fonctionner sous Firefox (au moins dans la version 57 "Quantum"): 

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

J'ai le même problème. Ma solution consistait en une multitude de boutons radio, avec l'image à droite. Comme vous ne pouvez choisir qu’une seule option à la radio, cela fonctionne (comme) une sélection.

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

0
Luan Persini

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!

0
BBaysinger

Ceci 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 voulez, vous pouvez utiliser avec css.

Exemple de 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>
0
Tolga

MISE À JOUR: À compter de 2018, cela semble fonctionner maintenant. Testé sous 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>
0
Jon