The CSS :checked Pseudo-Class Selector

: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.