:default CSS Pseudo Class

The :default pseudo-class represents user interface elements that are in their default state, meaning they are preselected or set as the default choice when a page first loads. This typically applies to form controls such as radio buttons, checkboxes, and buttons that the browser treats as the initially selected or preferred option before any user interaction occurs.

In practical terms, :default allows you to style form controls that represent the default choice in a group. For example, in a group of radio buttons, the one marked with the checked attribute when the page loads will match :default. This is especially useful for improving usability and visual clarity by subtly guiding users toward a recommended or commonly selected option without forcing a choice.

Unlike state-based selectors that respond to user interaction, :default reflects the initial semantic intent of the form, not the current interaction state. For example, if a user changes their selection, the originally default option may no longer be selected, but it still remains the default in terms of document semantics. This makes :default different from selectors like :checked, which track the live state of user interaction rather than the original configuration.

Common use cases

• Highlighting the recommended option in a radio button group
• Styling a default submit button in a form
• Improving accessibility by visually indicating suggested choices

Example: Styling a default radio button

<form>
  <label>
    <input type="radio" name="plan" checked>
    Basic Plan
  </label>

  <label>
    <input type="radio" name="plan">
    Premium Plan
  </label>
</form>

input:default {
  outline: 2px solid #0078d4;
  outline-offset: 3px;
}

In this example, the first radio button is marked as the default because it includes the checked attribute. The :default selector applies a visual outline to highlight it when the page loads.

Relationship to form elements

The :default pseudo-class is most commonly associated with form controls such as input elements. It does not apply to arbitrary elements and is limited to controls that support a meaningful default state. Internally, browsers use this state to help determine expected behavior during form submission and reset actions.

Styling considerations

You can combine :default with visual properties such as border to subtly differentiate default options without overwhelming the interface. This is particularly helpful in forms with multiple choices, where visual hierarchy improves usability.