:default CSS Pseudo Class
Description
The CSS :default pseudo-class selects the default element in a group of associated elements. This can be used to style checkboxes and radio buttons that are checked by default, option elements that are selected by default, and the default submit button in a form.
Here are some examples of how to use the :default pseudo-class:
/* Style all checked checkboxes */
input[type="checkbox"]:checked {
background-color: green;
}
/* Style the default checkbox in a group of checkboxes */
input[type="checkbox"]:default {
background-color: red;
}
/* Style all selected option elements */
option:selected {
background-color: blue;
}
/* Style the default option element in a select element */
select option:default {
background-color: yellow;
}
/* Style the default submit button in a form */
form button:default {
background-color: orange;
}
The
:default pseudo-class can be useful for styling form elements to make them more visually appealing and easier to use. For example, you could use it to highlight the default option in a select element, or to make the default submit button stand out from other buttons on the form.
Syntax
: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
The following table will show you the current browser support for the CSS :default pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 79 | 10 | 4 | 10 | 5 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 5 | 1 | 37 |
Last updated by CSSPortal on: 1st October 2023