CSS :default Selector

CSS :default selector is used to select and style those elements which are selected by default. This includes checkboxes, radio buttons, dropdown options and normal buttons.

For example, if we apply the :default selector on the checkboxes, it would select only those checkboxes which are checked by default.

And even if you uncheck these default selected checkboxes, they will still be selected by the :default selector.

See this example:

Example:

input[type='checkbox']:default{
   width: 20px;
   height: 20px;
}

Just like the checkboxes, you can also apply the :default selector on the radio buttons. This will only select those radio buttons which are selected by default.

See this example:

Example:

input[type='radio']:default{
   width: 20px;
   height: 20px;
}

You can also style the default selected options of a dropdown using the :default selector.

The :default selector in the following example sets a yellow background to the default selected option of the dropdown:

Example:

option:default{
    background: yellow;
}

CSS Syntax

The syntax of the :default selector is as follows:

:default{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :default selector.