The :checked pseudo-class in CSS targets form elements that are currently checked. This includes <input> elements of type checkbox or radio, and <option> elements in a <select> dropdown. It allows you to style elements based on their selected state without using JavaScript.

Example: Using :checked

In this example, checkboxes, radio buttons, and selected dropdown options are styled differently when they are checked or selected, providing visual feedback to the user.

Best Practices

1
Use :checked to style selected form elements without extra classes or JavaScript.
2
Combine with sibling selectors (+, ~) to style related elements based on selection.
3
Ensure visual feedback is clear for accessibility, including color contrast and focus indicators.
4
Test behavior across browsers, as form styling can vary slightly.

Difficulty: 3/10

Topics: pseudo-classes, form styling, accessibility

Scenario Questions

0-2 years experience

1
How would you use :checked to display a custom checkmark icon when a checkbox is selected?
2
If you have a group of radio buttons, how can you change the label color of the selected option using :checked?
3
What happens to a :checked selector if the input element is disabled, and how would that affect your styling?

2-5 years experience

1
We built a collapsible FAQ where clicking a label toggles a hidden answer using :checked and sibling selectors, but it fails in Safari. How would you troubleshoot the issue?
2
Why might a transition on a :checked style not animate as expected, and what CSS workaround would you apply?
3
You need a 'select all' checkbox that checks multiple other boxes using only CSS. Is this possible with :checked? Explain your reasoning.

5-8 years experience

1
In a component library, you want reusable toggle switches built with only CSS and :checked. What trade‑offs do you consider for theming, accessibility, and future maintenance?
2
Your page has dozens of inputs styled with :checked and you notice performance lag on low‑end devices. How would you measure the impact and improve it?
3
When integrating a third‑party UI framework, you need to override its default :checked styles without breaking other components. Describe your approach.

8+ years experience

1
Our organization is migrating legacy JavaScript‑driven checkbox logic to a CSS‑only solution using :checked across many forms. What architectural, testing, and cross‑team coordination steps would you plan for a smooth migration?
2
Design a design‑system token strategy that lets multiple product teams theme :checked styles (colors, borders, shadows) while keeping the CSS modular and maintainable.

Follow-up Questions

❓Can you show a minimal CSS snippet that uses :checked to reveal hidden content?
❓What accessibility considerations do you keep in mind when styling checked controls?
❓How would you verify that your :checked styles work across major browsers?