The :checked pseudo-class in CSS

The :checked pseudo-class is one of the most versatile CSS tools for creating interactive interfaces without using JavaScript. With it, you can detect when a checkbox, a radio button, or an option is selected, and from there modify styles, activate elements, show or hide content, create toggles, tabs, and much more.

:checked is the most direct way to "listen" to user interactions using only CSS. In projects where simplicity is sought, the first thing I do is rely on this pseudo-class to respond to visual states without resorting to scripts.

What the :checked CSS pseudo-class is and what it is used for

The :checked pseudo-class represents any HTML element that can have an activation state:

• <input type="checkbox">
• <input type="radio">
• <option> inside <select>

Whenever one of them is checked or selected, :checked matches it.

Elements that can use :checked

• Checkbox with the checked attribute.
• Selected radio buttons within the same group.
• Options of a <select> (although the level of visual support depends on the browser).

How the “on” state works in HTML

The checked state is boolean: it is either checked or it is not.

Valid examples:

<input type="checkbox" checked><input type="radio" checked>
<option selected>Option</option>

Very useful for activating cascading styles: when an input changes state, the entire interface can react.

Basic syntax of the :checked selector and examples

The selector of the pseudo-class :checked represents (allows selecting) any HTML radio element (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>).

In other words, we can get any of the aforementioned HTML elements that are "on" with this pseudo-class:

<input type = "checkbox" checked><input type = "radio" checked>
<option value="1" selected>option</option>

The checked selector is ideal for changing the style of checkboxes, which are the verification boxes in forms, in a simple way without using JavaScript and which work very well when using transitions for changes from one state to another, as we have seen in other tutorials where we talk about CSS transitions:

Once the elements are obtained, it is possible to define a new style on them, their children, neighboring HTML elements, etc; for example, in the case of a form, we can define a style for the sibling or adjacent label to the checkbox that has been turned on:

input[type="checkbox"]:checked + label { }

And of course, you can create your own transitions and thus enhance the visual aspect without using a line of JavaScript in a very simple way.

Examples with checkbox:

input[type="checkbox"]:checked { border: 2px solid blue;}

Examples with radio buttons:

input[type="radio"]:checked { outline: 2px solid red;}

Example with option inside select:

option:checked { color: green; font-weight: bold;}

:checked with combinators (+ and ~):

#toggle:checked ~ .panel { display: block;}

• + affects only the immediate sibling.
• ~ affects all subsequent siblings.

Custom checkbox:

<input type="checkbox" id="dark">
<label for="dark">Modo oscuro</label>
#dark:checked + label {
 color: #fff;
 background: #000;
}

Expanding panel:

#more:checked ~ .extra { display: block;}

Hidden radio inputs with visible labels. This pattern is ideal for creating "fake buttons":

.radio-hidden { position: absolute; left: -9999px;}.radio-hidden:checked + label { color: red;}

The for attribute to activate HTML elements

There is an attribute that can be used in conjunction with <label> called for that allows activating HTML checkbox and radio elements simply by clicking on the label without the need to use JavaScript.

Click on the following labels:

As you can see, it is very easy to use the CSS3 pseudo-selector :checked to select one or more elements based on whether it is selected or not and enhance it with other selectors, such as the sibling selector +

Use of the for attribute in CSS

To enable this function we only need to place the same value of the id attribute of the checkboxes and/or radios in the for of the label.

Example of the for attribute in CSS

<input id="arya-stark" type="checkbox" >
<label for="arya-stark">Arya Stark</label> 

Styling "on" elements using the :checked pseudo-class

Using the HTML presented above as a base, it is possible to select the inputs that are "on" with the following selector:

input:checked{} 

Or the label adjacent to the "on" input:

input:checked + label{} 

Styling "on" checkboxes and radios using the :checked pseudo-class

Applying a style rule to the label when the checkbox type input is "on" (<input type = "checkbox" checked >) is as simple as applying the following selector:

input:checked + label{ color: #FFFFFF;} 

And in the case of radio elements:

input:checked + label{ color: #FFFFFF;} 

:unchecked with CSS?

In reality, this selector does not exist, which by its name you can imagine would be the negation of the previous selector, that is, when the element is not on or pressed, the one that is de-selected; for this, what you can do is use the base CSS of the element:

input[type="checkbox"] {
  // Unchecked Style
}
input[type="checkbox"]:checked {
  // Checked Style
}

Or an equivalent version of the above:

input[type="checkbox"]:not(:checked) { // Unchecked Style} 

Although it is adding more noise, it is also another option.

Designing checked elements (checkbox and radio) without JavaScript

Changing input styles

input:checked { box-shadow: 0 0 0 3px orange;}

Changing label styles with + (adjacent selector)

This is one of my favorite techniques. When the input changes, the label responds:

input[type="checkbox"]:checked + label { color: #fff; background: #333;}

I use it a lot to show the user that their choice has changed without having to write a line of JS.

Integrating transitions to animate states

input + label { transition: all .3s ease;}

This way the changes between checked and unchecked are smooth and modern.

Using the for attribute to activate inputs with a click

I always recommend linking label + input, as it improves accessibility and usability.

<input id="arya" type="checkbox"><label for="arya">Arya Stark</label>

As a tip, put the same value in id and for, and I can click on the text to activate the input.

Common errors and best practices

• Do not repeat IDs.
• Do not use labels without for when the input is hidden.
• Keep the label close to the input for semantic clarity.

Conclusion

The :checked pseudo-class is one of the most powerful features of modern CSS, especially if you want dynamic interfaces without JavaScript. It allows detecting the activated state of checkboxes, radios, and options, and from there controlling styles, showing content, creating toggles, tabs, accordions, or complete UI effects.

In my own practice, it is a resource I constantly use to simplify code and improve usability by combining label, for, transitions, and adjacent selectors.

Frequently Asked Questions

• Which elements support :checked?
  • Checkbox, radios, and option.
• Can I style a selected option?
  • Yes, although visual support depends on the browser.
• Does :unchecked exist?
  • No, it must be simulated with base styles or :not(:checked).
• Can I create tabs without JavaScript?
  • Yes, using radio buttons + :checked.
• How do I make a toggle with only CSS?
  • A hidden checkbox + label + :checked.