Understanding the CSS :default Pseudo-Class

The CSS :default pseudo-class is a structural selector used to target form elements that are set as the default option within a group or form. This article explores how :default works, focusing on its application to default submission buttons, pre-selected checkboxes, and radio buttons. By distinguishing initial default states from user interactions, :default allows developers to provide clear visual cues, highlighting recommended choices or primary actions without relying on custom JavaScript or extra utility classes.

What is the :default Pseudo-Class?

The :default pseudo-class matches any form element that is the default among a group of related elements. It primarily applies to:

• <button> or <input type="submit"> elements that act as the default submit button for a form.
• <input type="checkbox"> and <input type="radio"> elements that have the checked attribute present in the initial markup.
• <option> elements in a <select> menu that have the selected attribute.

Styling Default Buttons

In an HTML <form>, the first submit button encountered in the document order is designated as the default button. This is the button activated when a user presses the "Enter" key inside a form input field.

Using the :default selector, you can visually distinguish this primary action from secondary actions, such as "Cancel" or "Save Draft" buttons.

/* Highlight the primary submit button in a form */
button:default {
  background-color: #0056b3;
  color: #ffffff;
  font-weight: bold;
  border: 2px solid #004085;
}

<form>
  <input type="text" name="username" required>
  
  <!-- This button matches :default because it is the first submit button -->
  <button type="submit">Save Changes</button>
  
  <!-- This button does not match :default -->
  <button type="button">Cancel</button>
</form>

If multiple submit buttons exist, only the first valid submit button receives the :default style, making it easy to automate primary action styling across complex layouts.

Styling Default Checkboxes and Radio Buttons

When applied to checkboxes and radio buttons, :default matches elements that include the boolean checked attribute on initial page load.

A key distinction exists between :checked and :default:

• :checked reflects the current state of the control, dynamically toggling on and off as the user clicks the option.
• :default reflects the initial state. It continues to match the element even after a user unchecks it or selects another radio button.

/* Style the label of an option that was selected by default */
input[type="checkbox"]:default + label {
  font-style: italic;
  color: #2c3e50;
}

/* Add a visual indicator showing the default state */
input[type="checkbox"]:default + label::after {
  content: " (Recommended)";
  font-size: 0.85em;
  color: #6c757d;
}

<form>
  <input type="checkbox" id="newsletter" name="newsletter" checked>
  <label for="newsletter">Subscribe to weekly newsletter</label>

  <input type="checkbox" id="terms" name="terms">
  <label for="terms">Agree to terms and conditions</label>
</form>

In this scenario, even if the user unchecks the "Subscribe to weekly newsletter" box, the label maintains its italic styling and "(Recommended)" suffix, providing context on what the initial configuration was.

Key Benefits of Using :default

• Context Preservation: In forms with many options, :default helps users track what the form originally suggested before they made changes.
• Cleaner Markup: It eliminates the need for hardcoded utility classes like .btn-primary or .is-default solely to denote initial choices or primary buttons.
• Form Automation: Design systems can apply standard styling globally to ensure every form's default action is consistently presented to the user.