CSS :default Pseudo-class

The :default pseudo-class in CSS is used to style the default element among a set of similar elements, such as form controls. It allows developers to highlight or differentiate the default option within a group, enhancing the user experience by making the default choice more apparent.

What Is the :default Pseudo-class?

The :default pseudo-class represents form elements that are the default among a set of related elements. This is particularly useful for styling default buttons, checkboxes, radio buttons, or options within a form.

Basic Usage of :default

The syntax for using the :default pseudo-class is straightforward:

element:default {
    /* CSS properties */
}
Copy

You can apply styles to any form element that is marked as default by using this pseudo-class.

Example: Styling the Default Submit Button

Consider a form with multiple submit buttons:

<form>
    <input type="submit" value="Save">
    <input type="submit" value="Save and Continue" class="continue">
</form>
Copy

In this case, the browser typically treats the first submit button as the default. You can style it using the :default pseudo-class:

input[type="submit"]:default {
    background-color: blue;
    color: white;
}
Copy

This CSS rule will apply the specified styles to the default submit button, making it visually distinct.

Example: Styling the Default Radio Button

Suppose you have a group of radio buttons, and one is marked as checked by default:

<form>
    <label>
        <input type="radio" name="shipping" value="standard" checked> Standard Shipping
    </label>
    <label>
        <input type="radio" name="shipping" value="express"> Express Shipping
    </label>
</form>
Copy

You can style the default (checked) radio button using the :default pseudo-class:

input[type="radio"]:default + label {
    font-weight: bold;
}
Copy

This rule targets the label associated with the default radio button, making the text bold to highlight the default choice.

Understanding How :default Works

The :default pseudo-class applies to form elements that are the default among a set. This includes:

• The first <input type="submit"> or <button type="submit"> in a form.
• A radio button or checkbox that is checked by default (i.e., has the checked attribute).
• An option in a <select> element that is selected by default (i.e., has the selected attribute).

Styling Default Options in a Select Element

You can also use :default to style the default option in a dropdown menu:

<select name="country">
    <option selected>Select your country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
</select>
Copy

Apply styles to the default option:

option:default {
    color: gray;
}
Copy

This will style the default option, often used as a placeholder, in gray to differentiate it from other options.

Browser Compatibility

The :default pseudo-class is well-supported in modern browsers, including Chrome, Firefox, Edge, and Safari. However, always check the most recent compatibility tables if you plan to use it in production to ensure consistent behavior across all users' browsers.

Conclusion

The :default pseudo-class is a useful tool for styling default form elements, enhancing usability by visually indicating default actions or selections to users. By incorporating this pseudo-class into