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

  Tweet It

πŸ•΅ Search Results

πŸ”Ž Searching...

Sponsored by #native_company# β€” Learn More
#native_title# #native_desc#