The :checked CSS pseudo-class selector represents any radio (<input type=”radio”>), checkbox (<input type=”checkbox”>) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.


element:checked { style properties }

<!DOCTYPE html>
            .radio-toolbar input[type = "radio"] {
                display: none;
            } .radio-toolbar label {
                display: inline-block;
                background-color: #ddd;
                padding: 4px 11px;
                font-family: Arial;
                font-size: 16px;
            } .radio-toolbar input[type =
            "radio"]:checked + label {
                background-color: #bbb;
        <div class="radio-toolbar">
            <input type="radio" id="radio1" name="radios" value="all" checked>
            <label for="radio1">
            <input type="radio" id="radio2" name="radios"value="false">
            <label for="radio2">
            <input type="radio" id="radio3" name="radios" value="true">
            <label for="radio3">