:checked and :disabled
Learn :checked and :disabled pseudo-classes.
What is :checked?
The :checked pseudo-class matches form controls that are currently checked: checkboxes, radio buttons, and option menus.
For example, input:checked + label { color: green; } turns the label next to a checked box green. It is an elegant way to give visual feedback without JavaScript.
The pseudo-class only watches the control's state; it does not change the user's click.
What is :disabled?
The :disabled pseudo-class matches form controls that carry the HTML disabled attribute. They cannot be clicked and submit no data.
Visually marking a disabled button is good practice. With button:disabled { opacity: 0.5; cursor: not-allowed; }, the button looks half transparent and the cursor turns into a 'not allowed' icon. The user understands why they cannot click.
Other form state pseudo-classes
Form controls have other pseudo-classes too:
:enabled— clickable, active control:read-only— non-editable field:placeholder-shown— placeholder still visible:focus-visible— keyboard focus, not mouse
Combine them to style each state of your form separately. For instance, :focus-visible shows an outline only on keyboard focus and hides it on mouse clicks, reducing visual noise.
Exercise Style a checked box and a disabled button
Write two declarations. First, an input:checked selector with accent-color: green inside. Second, a button:disabled selector with opacity: 0.5 inside. Both should sit in their own { } block.
Show example solution
/* add styles for checked box and disabled button */
input:checked {
accent-color: green;
}
button:disabled {
opacity: 0.5;
}Test yourself
-
What does input:checked match?
input:checked + label { color: green; }- Only radio buttons
- Currently checked boxes and radios
- Every input element
- Disabled fields
Show answer
Currently checked boxes and radios — Correct. :checked matches controls that are currently selected.
-
Write the selector for a disabled button
button____ { opacity: 0.5; cursor: not-allowed; }Show answer
button:disabled { opacity: 0.5; cursor: not-allowed; } -
Match each form state to its pseudo-class
- :checked
- Checked box
- :disabled
- Disabled field
- :focus
- Focused input
- :hover
- Pointer over it