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