The :default CSS pseudo-class represents any form element that is the default among a group of related elements.

This selector may be used on the <button>, <input type="checkbox">, <input type="radio">, and <option> elements.

/* Selects any default <input> */
input:default {
  background-color: lime;

Grouped elements that permit multiple selections may also have multiple defaults, i.e., they may have multiple items initially selected. In this case, all defaults are represented using the :default pseudo-class. For example, you can style the default checkboxes among a group of checkboxes.





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

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

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

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


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

input:default + label {
  color: coral;



Specification Status Comment
HTML Living Standard
The definition of ':default' in that specification.
Living Standard No change.
The definition of ':default' in that specification.
Recommendation Defines associated HTML semantics and constraint validation.
Selectors Level 4
The definition of ':default' in that specification.
Working Draft No change.
CSS Basic User Interface Module Level 3
The definition of ':default' in that specification.
Recommendation Initial definition, but without the associated semantics.

Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 10 ? 4 No 10 5
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support ? ? ? 4 10 5 ?

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.