CSS3 :checked pseudo-class

Definition and usage

CSS :checked pseudo-classes are used to match any selected <input> or <option> .

This applies to <input type="radio">, <input type="checkbox">, and <option> elements within <select>.

Example

Example 1

Set a thin red outline for all selected <input> elements:

input:checked {
  outline: 1px solid red;
}

Try it yourself

Example 2

Set different styles for radio buttons, checkboxes, and options when selected:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

Try it yourself

CSS syntax

:checked {
  css declarations;
}

Technical details

Browser support

The numbers in the table specify the first browser version to fully support the pseudo-class.