CSS :checked

The :checked CSS pseudo-class represents any radio input or checkbox input that is checked. It can be used to style checked elements differently.

Let's see an example using fictional data:


input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  padding: 5px 10px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  cursor: pointer;
}

input[type="radio"]:checked + label {
  background-color: #ffcccb;
}

<input type="radio" name="color" id="red" checked> <label for="red">Red</label><br>
<input type="radio" name="color" id="blue"> <label for="blue">Blue</label><br>
<input type="radio" name="color" id="green"> <label for="green">Green</label><br>

Result:

Please select your favorite color:

Red
Blue
Green

When you select a color, the background of the label will change to pink if it is checked.

In the example above, the CSS code is targeting the input[type="radio"]:checked selector to style the checked input differently by changing the background color of the label.

Feel free to try this example and experiment with different styles for checked elements!