CSS :default Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :default selector in CSS is a pseudo-class used to target the default form element in a group of similar form elements.

It applies specifically to form controls that are pre-selected or set as the default option when the page loads, such as the default radio button in a group or the default option in a dropdown menu.

💡 Syntax

The signature of the :default Selector is as follows:

Syntax

Copied

:default {
    /* CSS properties */
}

The :default pseudo-class can be applied to elements like radio buttons, checkboxes, and options within a <select> element that are marked as the default.

📝 Example

Here is an example of how to use the :default 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 :default Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <p>Choose your preferred contact method:</p>
        <input type="radio" id="email" name="contact" value="email" checked>
        <label for="email">Email</label>

        <input type="radio" id="phone" name="contact" value="phone">
        <label for="phone">Phone</label>

        <p>Select a country:</p>
        <select>
            <option value="us" selected>United States</option>
            <option value="uk">United Kingdom</option>
            <option value="in">India</option>
        </select>
    </form>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for the default radio button or select option */
:default {
    border: 2px solid blue;
    background-color: #e0f0ff;
}

In this example:

The radio button labeled "Email" is marked as the default and receives a blue border and a light blue background.
The "United States" option in the dropdown is also the default and gets the same styles.

💬 Usage Tips

The :default pseudo-class is particularly useful when you want to highlight the default choice in a group of options or inputs.
You can use :default in combination with other pseudo-classes or selectors to fine-tune the styling of default elements, such as input:default or option:default.

⚠️ Common Pitfalls

Not all form elements support the :default pseudo-class. It is primarily useful for radio buttons, checkboxes, and options within a <select> element.
Avoid confusing :default with the checked or selected attributes, which reflect user interaction. The :default selector only applies to the default state as defined in the HTML markup when the page loads.