:default CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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
Edge Chrome Firefox Opera Safari
79104105
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.15137

Last updated by CSSPortal on: 1st October 2023