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.
