← Back to pseudo-classes

CSS Pseudo-class / Element

:checked

Form

Applies styles to checked checkboxes, radio buttons, or selected options.

Syntax

input:checked { }

Example

input[type='checkbox']:checked { accent-color: #3dffa0; }

Common use cases

  • Custom checkbox and radio button styles
  • Toggle switches built in pure CSS
  • Highlighting selected options

Practical developer insight

Combine :checked with the ~ sibling combinator to build toggle UIs entirely in CSS without JavaScript.

Related

:disabled:focus:required