CSS :default Selector

What You’ll Learn

The :default pseudo-class styles form elements that are the default choice in their group — the option pre-selected in your HTML when the page loads.

Introduction

The :default selector in CSS is a pseudo-class used to target form elements that are the default in a group of related controls. It highlights what the author set as the initial choice in the HTML markup.

This applies to radio buttons and checkboxes with the checked attribute, <option> elements with selected inside a <select>, and the default submit button in a form.

Definition and Usage

Append :default to a selector with no space before the colon: input:default or option:default. Styles apply to elements that represent the default state — including what would be restored if the user resets the form.

📝 Syntax

The syntax for the :default pseudo-class is:

element:default {
  /* CSS properties */
}

Basic Example

input[type="radio"]:default {
  outline: 2px solid #2563eb;
  accent-color: #2563eb;
}

option:default {
  font-weight: 700;
  color: #1d4ed8;
}

Syntax Rules

• Only form elements with a defined default state can match :default.
• Use checked on radios/checkboxes and selected on options in HTML.
• Combine with type selectors: input[type="radio"]:default.
• Pair with + label to style the label of a default radio button.
• Not for text inputs, textareas, or elements without a default group role.

Related Selectors

• :checked — matches the currently selected/checked element
• :disabled — matches form controls that cannot be interacted with
• :optional and :required — validation state selectors
• [checked] and [selected] — attribute selectors for defaults

When to Use :default

:default helps users spot the recommended or pre-selected choice:

• Settings forms — Highlight the recommended plan or contact method on load.
• Country/locale selects — Emphasize the default region in a dropdown.
• Opt-in checkboxes — Show which newsletter options start checked by default.
• Reset behavior — Style elements that would be restored when a form is reset.
• Onboarding — Visually distinguish factory defaults from user-changed values.

Examples Gallery

Practice :default with radio buttons, select options, checkboxes, and comparison with :checked.

input[type="radio"]:default {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  accent-color: #2563eb;
}

input[type="radio"]:default + label {
  color: #1d4ed8;
  font-weight: 700;
}

option:default {
  font-weight: 700;
  color: #1d4ed8;
}

input[type="checkbox"]:default {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
  accent-color: #16a34a;
}

/* Original default from HTML */
input[type="radio"]:default + label {
  color: #1d4ed8;
}

/* Currently selected option */
input[type="radio"]:checked + label {
  text-decoration: underline;
}

⚠️ Common Pitfalls

• Limited elements — :default does not apply to text inputs, textareas, or plain divs.
• Confusing with :checked — On page load they often overlap; after user interaction they diverge.
• Missing attributes — Without checked or selected in HTML, no element matches :default.
• option styling — Browsers restrict styling of <option> elements; visual changes may be subtle.
• Over-highlighting — Don’t rely only on color to indicate defaults; add text like “(recommended)” when helpful.

♿ Accessibility

• Labels required — Always pair inputs with <label for="id"> so screen reader users know what each default option means.
• Don’t rely on style alone — Supplement :default styling with clear text indicating the recommended choice.
• Pre-selected opt-ins — Be careful with checked-by-default marketing checkboxes; some regulations require explicit consent.
• Focus styles — Style :focus alongside :default for keyboard users navigating the form.

💡 Best Practices