Table of Contents
:checked is a pseudo-class selector that's used to style the checked state of radio, checkbox or option elements:
:checked {
background-color: hotpink;
}
/* Only style checked checkboxes */
input[type="checkbox"]:checked {
padding-left: 1em;
}
Explicit styling unchecked elements
You can use the :not pseudo-class with :checked to explicit style unchecked elements. This can be useful if there are certain styles that you don't want to see applied to the checked state:
input:not(:checked) {
opacity: 0.6;
}
Browser Support
Can I Use css-sel3? Data on support for the css-sel3 feature across the major browsers from caniuse.com.
