CSS :default Pseudo-Class

CSS :default Pseudo-Class

The CSS :default pseudo-class selects form controls that represent the default choice or action within a group of related controls. It can identify initially checked checkboxes, default radio buttons, selected options, and a form's default submit button, even when the user changes the current selection.

:default Syntax

:default {
  property: value;
}

The :default pseudo-class does not accept arguments. It can be combined with an element selector, attribute selector, or other selectors to target specific default form controls.

Example Syntax

input:default {
  outline: 2px solid #0088cc;
}

This rule adds a blue outline to input elements that represent default selections or default form actions.

The selector has a specificity of 0-1-0. Combined with the input type selector, its specificity becomes 0-1-1.

How :default Works

When a form contains related choices, HTML can identify which control is the default. The :default pseudo-class matches the control that represents that default choice or action.

For checkboxes and radio buttons, the checked HTML attribute establishes the default checked state. For option elements, the selected attribute can establish the default selection.

Unlike :checked, :default generally continues to match the original default control after the user changes the current selection.

Expected Matching Behavior

Important: A control's default status and its current state are different. A checkbox can remain the default even when it is no longer checked.

Elements That Match :default

The :default pseudo-class applies to several HTML form controls, depending on their role and default state.

Supported Form Controls

Default Checkbox

<input type="checkbox" id="updates" checked>
<label for="updates">Receive updates</label>

input[type="checkbox"]:default {
  outline: 2px solid #0088cc;
}

The checkbox matches :default because it has the checked attribute. The outline remains even if the user unchecks it.

Default Radio Button

<input type="radio" name="plan" id="basic" checked>
<label for="basic">Basic</label>
<input type="radio" name="plan" id="premium">
<label for="premium">Premium</label>

input[type="radio"]:default + label {
  font-weight: bold;
  color: #0088cc;
}

The Basic label remains highlighted as the default choice even when the user selects Premium.

Default Option

<select name="theme">
  <option value="light">Light</option>
  <option value="dark" selected>Dark</option>
</select>

option:default {
  font-weight: bold;
}

The Dark option is the default selection because it has the selected attribute. If no option has that attribute in a single-selection list, the browser can designate the first enabled option as the default.

Native option styling varies across browsers and operating systems, so changes to font weight may not always be visible.

Default Submit Button

<form action="/submit" method="post">
  <input type="text" name="username" aria-label="Username">
  <button type="submit">Save</button>
  <button type="submit">Save and Continue</button>
</form>

button:default {
  border: 2px solid #0088cc;
  font-weight: bold;
}

The first submit button is the form's default submit button. This is generally the button activated by implicit form submission, such as pressing Enter in an eligible text field.

:default vs. :checked

The :default and :checked pseudo-classes can match the same element, but they represent different conditions.

Example

<input type="checkbox" id="notifications" checked>
<label for="notifications">Enable notifications</label>

input:default {
  outline: 2px solid #0088cc;
}
input:checked {
  accent-color: #27ae60;
}

Initially, the checkbox matches both selectors. If the user unchecks it, the green checked-state appearance disappears, but the blue outline remains because the checkbox is still the default choice.

Changing a form control's HTML attributes or default state through JavaScript can also change which elements match :default.

Practical Uses

The :default pseudo-class is useful when users need to recognize recommended or original form selections.

Highlighting a Recommended Choice

<input type="radio" name="layout" id="standard" checked>
<label for="standard">Standard Layout</label>
<input type="radio" name="layout" id="compact">
<label for="compact">Compact Layout</label>

input:default + label {
  color: #0088cc;
  font-weight: bold;
}

The Standard Layout label remains highlighted as the original default, regardless of which layout the user currently selects.

Marking a Default Checkbox

input[type="checkbox"]:default + label::after {
  content: " (Default)";
  color: #0088cc;
  font-size: 0.875rem;
}

This rule adds a visible Default label after the text associated with a checkbox that has the checked attribute.

Styling the Default Submit Button

form button:default {
  background-color: #0088cc;
  color: #fff;
  border: 2px solid #006699;
}

This rule highlights the form's default submit button. When multiple submit buttons are present, it can help users identify the primary action.

Best Practices

• Use :default to identify default choices, not the current checked state.
• Use :checked when styles should follow the user's current selection.
• Remember that the default submit button is determined by the form structure and button order.
• Use descriptive labels to explain default or recommended choices.
• Do not rely on color alone to identify a default selection.
• Keep native form controls accessible to keyboard and assistive technology users.
• Test default option styling because native select menus vary across browsers.
• Avoid using :default as a replacement for form validation or JavaScript state management.

:default Example

This example highlights the default radio button in a group. Select a different option to see that the Default label stays with the original choice while the checked selection changes.

HTML

<div class="default-demo">
  <p>Choose a layout:</p>
  <div class="choice">
    <input type="radio" name="layout" id="layout-standard" checked>
    <label for="layout-standard">Standard</label>
  </div>
  <div class="choice">
    <input type="radio" name="layout" id="layout-compact">
    <label for="layout-compact">Compact</label>
  </div>
</div>

CSS

.default-demo {
  padding: 12px;
  border: 1px solid #ccc;
}
.default-demo p {
  margin: 0 0 10px;
  font-weight: bold;
}
.default-demo .choice {
  margin-bottom: 8px;
}
.default-demo input {
  accent-color: #0088cc;
}
.default-demo input:default + label {
  color: #0088cc;
  font-weight: bold;
}
.default-demo input:default + label::after {
  content: " (Default)";
  font-size: 0.75rem;
}

Browser Result

Select either radio button below. The Standard option remains labeled Default because it was designated as the original selection.

Play in Editor

Browser Support

Baseline: Widely available. The :default pseudo-class is supported across modern browsers and has been available across major browser engines since January 2020.

Although the selector is widely supported, the visual styling of native form controls, particularly <option> elements, may vary by browser and operating system.

For current compatibility information, visit Can I Use? and search for CSS :default.

Specifications

The :default pseudo-class is defined in Selectors Level 4, with HTML-specific matching behavior defined in the HTML Living Standard.

Selectors Level 4 - The :default Pseudo-Class

HTML Living Standard - :default