How to add images into a select list with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *