:default - CSS: Cascading Style Sheets | MDN (original) (raw)

Baseline

Widely available

The :default CSS pseudo-class selects form elements that are the default in a group of related elements.

Try it

label,
input[type="submit"] {
  display: block;
  margin-top: 1em;
}

input:default {
  border: none;
  outline: 2px solid deeppink;
}

<form>
  <p>How did you find out about us?</p>
  <label
    ><input name="origin" type="radio" value="google" checked /> Google</label
  >
  <label><input name="origin" type="radio" value="facebook" /> Facebook</label>
  <p>Please agree to our terms:</p>

  <label
    ><input name="newsletter" type="checkbox" checked /> I want to subscribe to
    a personalized newsletter.</label
  >

  <label
    ><input name="privacy" type="checkbox" /> I have read and I agree to the
    Privacy Policy.</label
  >

  <input type="submit" value="Submit form" />
</form>

What this selector matches is defined in HTML Standard §4.16.3 Pseudo-classes — it may match the , , , and elements:

• A default option element is the first one with the selected attribute, or the first enabled option in DOM order. multiple s can have more than one selected option, so all will match :default.
• <input type="checkbox"> and <input type="radio"> match if they have the checked attribute.
• matches if it is a 's default submission button: the first <button> in DOM order that belongs to the form. This also applies to types that submit forms, like image or submit.

Syntax

Examples

HTML

<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring" value="spring" />
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" value="summer" checked />
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall" value="fall" />
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter" value="winter" />
  <label for="winter">Winter</label>
</fieldset>

CSS

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

Result

Specifications

Browser compatibility

See also