: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
Explorer Edge Chrome Firefox Opera Safari
XX104105
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
3718410.15X