How to use the checkbox inside the select option with CSS?

Spread the love

Sometimes, we want to use the checkbox inside the select option with CSS.

In this article, we’ll look at how to use the checkbox inside the select option with CSS.

How to use the checkbox inside the select option with CSS?

To use the checkbox inside the select option with CSS, we set the content property.

For instance, we write

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}

.select-checkbox option:checked::before {
  content: "\2611";
}

to set the content of before the option element’s text to the characters that shows checked or unchecked.

\2610 is an empty checkbox and \2611 is a checked checkbox.

Conclusion

To use the checkbox inside the select option with CSS, we set the content property.

Leave a Reply

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