The :checked pseudo-class in CSS allows you to style form elements like checkboxes and radio buttons based on whether they are selected (checked) or not. This enables dynamic visual feedback for user interactions.

Key Points About :checked

1
:checked – Selects checkboxes or radio buttons that are currently checked.
2
Can be combined with adjacent sibling selectors or general sibling selectors to style related elements when a checkbox is checked.
3
Useful for custom checkbox styles, toggle switches, and interactive UI elements without JavaScript.

Example: Styling Checkboxes When Checked

In this example, when a checkbox is checked, the associated label text turns green and bold, providing a clear visual indication of the checked state.

Best Practices

1
Use :checked to style both the checkbox and related elements for better UX.
2
Combine with transitions for smooth state changes.
3
Ensure accessibility by maintaining sufficient contrast and using semantic HTML.
4
Test across browsers, as custom styling of checkboxes may require vendor prefixes or additional CSS for consistent appearance.

Difficulty: 3/10

Topics: CSS pseudo-classes, custom checkbox styling, accessibility compliance

Scenario Questions

0-2 years experience

1
How would you make a custom checkbox turn green when checked, using only CSS?
2
What happens if you try to style the input[type='checkbox'] directly with background-color? Why doesn't it work?
3
You're given a design where the checkbox should show a checkmark icon when selected — how do you implement that without JavaScript?

2-5 years experience

1
A teammate says the custom checkbox isn't working in Safari — what would you check first, and why?
2
Our form’s custom checkboxes look fine in light mode, but break in dark mode — how do you debug and fix this without duplicating styles?
3
Users report the checkbox doesn’t respond to keyboard spacebar — what CSS or HTML issue might be causing this?

5-8 years experience

1
We have 50+ custom checkboxes on a single page and users report lag on mobile — how would you optimize the CSS and structure for performance?
2
Our design system needs to support 3 states: checked, unchecked, and indeterminate — how do you implement this cleanly across components without bloating CSS?
3
A third-party library overrides our checkbox styles unexpectedly — how do you ensure specificity and maintainability without !important?

8+ years experience

1
We’re migrating from a legacy checkbox component that used JavaScript for state — how do you plan the CSS-only transition without breaking accessibility or analytics tracking?
2
Our design system supports 12 global themes — how do you architect checkbox styling to scale across themes without exponential CSS bloat or runtime overhead?
3
A compliance audit found our custom checkboxes fail WCAG 2.2 contrast requirements on some devices — how do you redesign the approach to ensure long-term accessibility compliance across platforms?

Follow-up Questions

❓What happens if you forget to hide the native checkbox?
❓How would you test this works on a screen reader?
❓Why not just use a <div> instead of an actual checkbox input?