CSS3 Selectors: Pseudo class :checked

This entry is part 22 of 40 in the series CSS3 Selectors

Checked applies to a user interface element E which is checked (for instance a radio-button or checkbox).

Depending on which radio button is checked, the CSS style will be applied to it dynamically according to the states of the buttons.


<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    input[type='radio']:checked + label {
        font-family: sans-serif;
        color: blue;

<p>Where would you like to go next?</p>

<form method='post'>
    <input type='radio' name='country' value='england' id='england'>
    <label for='england'>England</label>
    <input type='radio' name='country' value='brazil' id='brazil'>
    <label for='brazil'>Brazil</label>
    <input type='radio' name='country' value='malaysia' id='malaysia' checked>
    <label for='malaysia'>Malaysia</label>



Series Navigation<< CSS3 Selectors: form control :disabled
CSS3 Selectors: :required & :optional >>

Leave a comment

Leave a Reply