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.

Syntax

:default

Example

HTML

<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>

CSS

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

input:default + label {
  color: coral;
}

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':default' in that specification.
Living Standard No change.
HTML5
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 compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support10 ?4 No105
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ?4105 ?

Document Tags and Contributors

Last updated by: fscholz,