W3cubDocs

/CSS

:default

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.
Proposed Recommendation Initial definition, but without the associated semantics.

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 10 ? 4 No 10 5
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera 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.
https://developer.mozilla.org/en-US/docs/Web/CSS/:default