Sometimes, we w=ant to add images into a select list with CSS.
In this article, we’ll look at how to add images into a select list with CSS.
How to add images into a select list with CSS?
To add images into a select list with CSS, we set the background image of the option element.
For instance, we write
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
to add a select drop down.
Then we write
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);
}
to select the option elements with the value attribute set to the given values.
And then we apply the background image to them by setting the background-image property to the image URL.
Conclusion
To add images into a select list with CSS, we set the background image of the option element.
