0
167
Vistas¿Cómo agregar un ícono de imagen SVG en la lista desplegable?
Estoy tratando de agregar algunos íconos de imágenes SVG a mi lista desplegable, probé algunos enfoques diferentes, pero ninguno de ellos parece estar funcionando.
appt-status option[value="0"] { background-image: url(../icons/not_confirmed-icon.svg); } .appt-status option[value="1"] { background-image: url(../icons/confirmed-icon.svg); } .appt-status option[value="2"] { background-image: url(../icons/reschedule-icon.svg); } .appt-status option[value="3"] { background-image: url(../icons/pending-icon.svg); } <select class="form-control appt-status" data-bind="value: selectedAppointmentStatus"> <option class=" status-list" value="1" style="color: #3EA47B">Confirmed</option> <option class="status-list" value="2" style="color: #FF0000">Reschedule</option> <option class="status-list" value="3" style="color: #FFA927">Pending</option> <option class="status-list" value="0" style="color: #3EA47B">Not opted-in</option> </select>Con el código anterior, en la ventana de inspección, puedo ver que se están cargando íconos, pero no puedo verlos en el menú desplegable.
A continuación se muestra la maqueta de diseño que me gustaría lograr
Pero el resultado que estoy obteniendo
3 Respuestas
Responde la pregunta0
podría intentar usar un pseudo elemento para agregar los íconos a su clase status-list , algo como esto podría funcionar
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>0
No puede lograrlo directamente solo con HTML. Para mostrar las imágenes en el drop-down selección, tenemos que usar bibliotecas de JavaScript o JavaScript puro. puede agregar una imagen en las opciones de selección usando la biblioteca select2 jQuery.
0
.fa { font-family: 'Lato', 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; padding: 1rem 2rem; color: #3a9c7d; } <div class="select-box"> <select name="sample" id="sample" class="fa"> <option value="">----</option> <option value="fa fa-address-card" class="fa"> address card</option> <option value="fa fa-bell" class="fa"> bell</option> <option value="fa fa-bookmark" class="fa"> bookmark</option> <option value="fa fa-building" class="fa"> building</option> </select> </div>Enlace de demostración: - https://codepen.io/mstanka/pen/mdPBdMa