: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

Next lesson: Summary - Interactive list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies