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.