CSS :default Pseudo Class

CSS :default Pseudo-Class

The :default pseudo-class in CSS selects form elements that are the default choice in a group, such as:

• The pre-selected radio button

• The pre-selected checkbox

• The default submit button

1. Syntax

selector:default {
  property: value;
}

✅ Targets the default option in forms, such as radio buttons, checkboxes, and buttons.

2. Example – Styling the Default Radio Button

input:default {
  border: 2px solid red;
}

<form>
  <label>
    <input type="radio" name="gender" value="male" checked> Male
  </label>
  <label>
    <input type="radio" name="gender" value="female"> Female
  </label>
</form>

✅ The pre-selected (default) radio button gets a red border.

3. Example – Styling the Default Checkbox

input:default {
  box-shadow: 0 0 5px blue;
}

<input type="checkbox" checked> Default Checked
<input type="checkbox"> Not Checked

✅ The checked checkbox gets a blue glow.

4. Example – Styling the Default Submit Button

button:default {
  background: blue;
  color: white;
}

<button type="submit">Submit</button>
<button type="reset">Reset</button>

✅ The default submit button turns blue.

5. When to Use :default?

✔ To highlight pre-selected form elements.
✔ To style default buttons differently.
✔ To improve accessibility and usability.

6. Browser Compatibility

✅ Supported in all modern browsers (Chrome, Firefox, Edge, Safari).