The :checked pseudo-class targets form controls when they are selected. Use it with radio buttons and checkboxes to change their appearance after selection; support for applying it to <option> elements is browser-dependent. section 10.3.6
Use the selected-state rule to build a responsive, custom control appearance:
- Style the selected control or its pseudo-element with an accent color. section 10.3.6
- Place the hover rule before the checked rule when both selectors have equal specificity, so the selected appearance wins while hovering. section 10.3.6
- Combine :checked with :is() or :where() to target radio buttons and checkboxes together. section 10.3.6 section 10.3.8
- Change the selected control’s border color separately when the outline should match the accent color. section 10.3.8
Selected custom controls
A selected radio button or checkbox can receive an accent-colored inner element and border. A checkbox can then use a clipped polygon to display a check mark: input[type="checkbox"]::before { clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } section 10.3.6 section 10.3.8
Listing 10.14 Accent-color outline for selected inputs
:is(input[type="radio"], input[type="checkbox"]):checked {
border-color: var(--accent);
}
Inspect the concise selector that applies an accent-colored border only while a radio button or checkbox is selected. section 10.3.8
