:default CSS Pseudo Class

Description

The :default pseudo-class applies style to form elements that are set by default in a group of similar elements. For example, we can have two buttons for sending form data to the server. One of these buttons is set by default, we can change its style through :default.

Syntax

element:default { … } 

Example

<fieldset>

  <legend>Favourite Countries</legend>

  <input type="checkbox" id="nz">

  <label for="nz">New Zealand</label>

  <input type="checkbox" id="au" checked>

  <label for="au">Australia</label>

  <input type="checkbox" id="uk">

  <label for="uk">United Kingdom</label>

  <input type="checkbox" id="us">

  <label for="us">United States</label>

</fieldset>

input:default {

  box-shadow: 0 0 2px 1px red;

}

input:default + label {

  color: red;

}

Notes

The :default pseudo class is currently not supported in Edge or Internet Explorer.

Browser Support

Desktop
X	X	10	4	10	5
Tablets / Mobile
37	18	4	10.1	5	X

Last updated by CSSPortal on: 25th November 2019