CSS :default pseudo-class

Definition and usage

CSS :default The pseudo-class is used to select the default form element from a set of related elements.

This pseudo-class can be used for <button>, <input type="checkbox">, <input type="radio">, and <option> elements.

Example

Example 1

Add red shadows to default input elements:

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

Try it yourself

Example 2

Set different default styles for radio buttons, checkboxes, and options:

input[type=radio]:default {
  box-shadow: 0 0 5px 3px blue;
}
input[type=checkbox]:default {
  box-shadow: 0 0 5px 3px maroon;
}
option:default {
  color: blue;
  background-color: pink;
}

Try it yourself

CSS syntax

:default {
  css declarations;
}

Technical details

Browser support

The numbers in the table specify the first browser version that fully supports this pseudo-class.