CSS :default Pseudo-class

Definition and Usage

The :default pseudo-class matches form elements that are the default in a related group — for example a radio/checkbox with the checked attribute, a default option, or a form’s default submit button.

It is not the same as :checked. :checked follows the current selection; :default points at the control that was defined as the default.

CSS Syntax

Often paired with a type or sibling: input:default, option:default, input:default + label.

Common Patterns

How to Use :default

Mark the default in HTML, then highlight it in CSS.

1. Set the default with checked, selected, or rely on the first submit button.
2. Write :default (or input:default / option:default).
3. Optionally style the neighboring label with +.
4. Verify after changing the selection — default and checked may diverge.

Live Preview

Summer starts as the default. Pick another season: coral marks :default; the selected radio is the current choice.

CSS Examples

Each snippet focuses on :default. Use Try It Yourself for a live editor.

<style>
  input:default {
    outline: 2px solid #f97316;
    outline-offset: 2px;
  }
  input:default + label {
    color: #ea580c;
    font-weight: 700;
  }
</style>

<input type="radio" name="size" id="s" value="s">
<label for="s">S</label>
<input type="radio" name="size" id="m" value="m" checked>
<label for="m">M</label>

<style>
  :default {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
  }
</style>

<form>
  <button type="submit">Save</button>
  <button type="button">Cancel</button>
</form>

<style>
  input:default + label::after {
    content: " (default)";
    color: #ea580c;
  }
  input:checked + label {
    font-weight: 700;
    color: #2563eb;
  }
</style>

<input type="radio" name="c" id="a" value="a" checked>
<label for="a">A</label>
<input type="radio" name="c" id="b" value="b">
<label for="b">B</label>

Key Takeaways