Tutorial
The CSS :checked Pseudo-Class Selector
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
: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.
