CSS :checked Selector

Posted in CSS Tutorial

Updated on Oct 16, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :checked selector in CSS is used to style form elements that are checked or selected.

This selector applies to checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), and <option> elements in a dropdown (<select>), allowing you to create custom styles when these elements are selected.

💡 Syntax

The signature of the :checked Selector is as follows:

Syntax

Copied

:checked {
    /* CSS properties */
}

The :checked pseudo-class can be applied to input elements like checkboxes, radio buttons, and options in a select dropdown.

📝 Example

Here’s an example demonstrating how the :checked selector can be used:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :checked Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <h3>Choose your preferences:</h3>
        <input type="checkbox" id="subscribe" checked>
        <label for="subscribe">Subscribe to newsletter</label><br>

        <input type="radio" id="male" name="gender">
        <label for="male">Male</label><br>

        <input type="radio" id="female" name="gender" checked>
        <label for="female">Female</label><br>

        <select>
            <option value="yes" checked>Yes</option>
            <option value="no">No</option>
        </select>
    </form>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for checked checkboxes and radio buttons */
input:checked {
    outline: 2px solid blue;
    background-color: #cce7ff;
}

/* Style for checked options in select dropdowns */
option:checked {
    background-color: #cce7ff;
}

In this example:

Checked checkboxes and radio buttons are highlighted with a blue outline and light blue background.
The selected option in the dropdown gets a background color change when checked.

💬 Usage Tips

The :checked selector is especially useful when customizing checkboxes, radio buttons, and dropdowns beyond default browser styles.
It can be combined with other pseudo-classes or selectors. For example, input[type="radio"]:checked targets only checked radio buttons.
To enhance user experience, you can use transitions to animate changes when elements are checked.

⚠️ Common Pitfalls

The :checked pseudo-class only applies to elements that can have a checked state, such as checkboxes, radio buttons, and select options. It will not work on other form elements.
Ensure that your styles do not conflict with the form's default behavior, especially if you are using JavaScript to dynamically update the checked state.
If using a select dropdown, keep in mind that browsers handle the styling of options differently, so test for cross-browser compatibility.

🎉 Conclusion

The :checked selector is a versatile and powerful way to style form elements based on their selection state.

By applying this pseudo-class, you can create a more interactive and visually appealing form, guiding users through their choices. It’s a great tool for enhancing the look and feel of checkboxes, radio buttons, and dropdowns on your web page.