J'ai une liste sélective 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 veux ajouter un bouton à la place de l'icône de la liste déroulante.
Comment faire ?
Faire simplement un lien vers une bibliothèque n'est pas une bonne réponse. Il est préférable d'établir un lien vers cette bibliothèque, d'expliquer pourquoi elle résout le problème et de fournir du code utilisant la bibliothèque pour y parvenir. Voir : Comment puis-je créer un lien vers une ressource externe de manière conviviale pour la communauté ?
Ceux qui sont intéressés par cette solution bootstrap/jquery peuvent consulter la réponse d'Adarsh ici : stackoverflow.com/questions/33726202/
MISE À JOUR : depuis 2018, cela semble fonctionner maintenant. Testé dans Chrome, Firefox, IE et Edge.
MISE À JOUR : Oui, j'ai changé la couleur de fond, pas l'image, arrêtez de me voter, montrer que vous pouvez changer de style ici est toujours une contribution utile.
<!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>
Dans mon exemple, je changeais la couleur de l'arrière-plan au lieu de l'image, mais la sélection du style prouve quand même le bien-fondé de la question.
Cette réponse ne répond pas à la question posée ( "Comment ajouter images dans la liste de sélection ?" ) du tout.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
9 votes
Duplicata de Image dans l'élément SELECT et Comment mettre une image dans Select ? . stackoverflow.com/search?q=html+select+image .
6 votes
Comme solution générale : si vous le pouvez, rassemblez vos icônes sous forme de SVG, importez-les dans une police de votre choix dans la gamme Unicode personnelle, utilisez cette police dans vos
<option>s ; supporté par tout ce qui existe à partir de IE 8.0, petit et simple.