CSS :checked

The CSS :checked pseudo-class is used to style elements that are in a checked state, such as checkboxes, radio buttons, and <option> elements within a dropdown menu. It allows you to apply styles dynamically based on the checked state of these elements.

The syntax for the :checked pseudo-class is:

</>
Copy
selector:checked {
    property: value;
}

Where:

ParameterDescription
selectorThe input element (checkbox, radio button, or <option>) to which the :checked pseudo-class will apply.
propertyThe CSS property to style the element.
valueThe value assigned to the CSS property.

Examples

1. Styling a Checked Checkbox

In this example, a checked checkbox is styled with a green border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input[type="checkbox"]:checked {
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <label>
        <input type="checkbox"> Check me
    </label>
</body>
</html>

2. Styling a Selected Radio Button

Here, a selected radio button is styled with a blue background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input[type="radio"]:checked {
            background-color: blue;
        }
    </style>
</head>
<body>
    <label>
        <input type="radio" name="option"> Option 1
    </label>
    <label>
        <input type="radio" name="option"> Option 2
    </label>
</body>
</html>

3. Styling Selected Options in a Dropdown

In this example, selected <option> elements in a dropdown menu are styled with a lightgray background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        option:checked {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</body>
</html>

4. Styling Custom Checkboxes

Here, custom checkboxes are styled with a green checkmark when checked.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input[type="checkbox"] {
            display: none;
        }

        input[type="checkbox"] + label {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid gray;
        }

        input[type="checkbox"]:checked + label {
            background-color: green;
            content: "✔";
        }
    </style>
</head>
<body>
    <input type="checkbox" id="custom-checkbox">
    <label for="custom-checkbox"></label>
</body>
</html>

5. Styling a Toggle Switch

In this example, a custom toggle switch changes to a blue background when checked.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input[type="checkbox"] {
            display: none;
        }

        input[type="checkbox"] + label {
            display: inline-block;
            width: 50px;
            height: 25px;
            background-color: gray;
            border-radius: 25px;
            position: relative;
            cursor: pointer;
        }

        input[type="checkbox"]:checked + label {
            background-color: blue;
        }

        input[type="checkbox"] + label::after {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: 2.5px;
            left: 2.5px;
            transition: 0.3s;
        }

        input[type="checkbox"]:checked + label::after {
            left: 27.5px;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="toggle-switch">
    <label for="toggle-switch"></label>
</body>
</html>