CSS :indeterminate Selector

Posted in CSS Tutorial

Updated on Sep 20, 2024

By Mari Selvan

👁️ 4 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The :indeterminate selector in CSS is used to target checkboxes or radio buttons that are in an indeterminate state. This state typically occurs when a checkbox's selection is unclear, such as when it is partially checked.

It is commonly used in scenarios where multiple options are selected, but not all of them, making it a useful tool for representing partial selections.

💡 Syntax

The signature of the :indeterminate Selector is as follows:

Syntax

Copied

:indeterminate {
    /* CSS properties */
}

The :indeterminate pseudo-class can only be applied to form elements, specifically <input type="checkbox"> and <input type="radio">, when their state is neither fully checked nor unchecked.

📝 Example

Here is an example of how to use the :indeterminate selector in CSS:

☠️ 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 :indeterminate Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <fieldset>
            <legend>Select your preferences</legend>
            <input type="checkbox" id="selectAll" indeterminate>
            <label for="selectAll">Select All</label><br>
            <input type="checkbox" id="option1">
            <label for="option1">Option 1</label><br>
            <input type="checkbox" id="option2">
            <label for="option2">Option 2</label>
        </fieldset>
    </form>

    <script>
        // Set the checkbox to indeterminate programmatically
        document.getElementById('selectAll').indeterminate = true;
    </script>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for indeterminate checkboxes */
:indeterminate {
    background-color: #ffeb3b;
    border: 2px solid #ff9800;
}

/* Style for checked checkboxes */
:checked {
    background-color: #4caf50;
    border: 2px solid #388e3c;
}

/* Style for unchecked checkboxes */
:unchecked {
    background-color: #f5f5f5;
    border: 2px solid #9e9e9e;
}

In this example:

The Select All checkbox is in an indeterminate state, giving it a yellow background and an orange border to indicate its partial selection status.
Regular checked and unchecked checkboxes are styled with different colors to provide a clear visual distinction.

💬 Usage Tips

The indeterminate state is usually set via JavaScript as it cannot be added directly via HTML. Use JavaScript to toggle the indeterminate state when needed.
Use the :indeterminate selector in conjunction with :checked and :unchecked to create a consistent and clear form experience for your users.
It is most useful in cases where parent-child relationships exist in checkboxes, such as when selecting categories or hierarchical options.

⚠️ Common Pitfalls

Not applying the indeterminate state: Remember that HTML does not have a native attribute for the indeterminate state. You must set it using JavaScript like so: checkbox.indeterminate = true;.
Browser inconsistencies: Some browsers might render the indeterminate state differently. Always test your styles across major browsers.
Misinterpreting indeterminate: An indeterminate checkbox is neither checked nor unchecked. It is a third state, so applying styles to both :checked and :indeterminate might cause confusion if not managed properly.

🎉 Conclusion

The :indeterminate selector allows you to apply styles to form elements that are in an ambiguous state, enhancing the user interface by making partially selected elements more visually clear.

By using JavaScript to control the indeterminate state and CSS to style it, you can build more intuitive forms for users who need to select multiple options or categories.