0
162
ViewsHow to add SVG image icon in dropdown list?
I am trying to add some SVG image icons to my dropdown list, I tried a few different approaches but none of them seems to be working.
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>With the above code, in inspect window, I can see icons are being loaded but I cannot see them in the dropdown.
Below is the design mockup I would like to achieve
But the result I am getting
·
Santiago Trujillo
3 answers
Answer question0
you could try using a pseudo element to add the icons to your status-list class, something like this might work
<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>
·
Santiago Trujillo
Report
0
You can't directly achieve it with the HTML alone. To display the images in the select drop-down we have to use JavaScript libraries or pure JavaScript. you can add an image in select options using the select2 jQuery library.
·
Santiago Trujillo
Report
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>
Demo link:- https://codepen.io/mstanka/pen/mdPBdMa
·
Santiago Trujillo
Report
Answer question