:checked
Matches a checked checkbox or radio button, and a selected `<option>`.
Syntax
input:checked { … }Examples
A checked task is crossed out:
<style>
input:checked + span { text-decoration: line-through; color: gray; }
</style>
<label><input type="checkbox"> <span>Buy milk</span></label><br>
<label><input type="checkbox" checked> <span>Walk the dog</span></label>Notes
:checked reacts to clicks without any JavaScript, which is why it is used for simple toggles. To style the label rather than the text after the input, use label:has(:checked).
See also
- :has() — Matches an element that contains something matching the selector in brackets — the "parent selector".
- accent-color — The accent color of built-in form controls: checkboxes, radio buttons, sliders and progress bars.
- <input> — An input field; its kind is set by the `type` attribute.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.