:default | CSS-Tricks

The :default pseudo selector will match the default in a group of associated elements, such as the radio button in a group of buttons that is selected by default, even if the user has selected a different value.

input[type="radio"]:default + label:after {
   content: ' (default)';
   color: #999;
   font-style: italic;
}

The CSS above targets the label coming immediately after the default selected radio button in a group of radio buttons:

red
green
blue

The green radio button’s label will be followed by the text “(default)” in grey, italic text in supporting browsers.

red
green
blue

Examples include the default submit button in a group of buttons, the default option from a popup menu, the radio button that has the checked attribute set in the HTML (as seen in supporting browsers), and the checkboxes that are by default checked.

More Resources

Browser Support

Different browsers have different levels of support. Firefox provides full support. Webkit browsers support default on buttons but not on radio or checkboxes, and Opera is the inverse, supporting it on radio buttons and checkboxes, but not on the submit.

Opera supports :default on checkboxes and radio buttons.
Webkit browsers, including Chrome and Safari, support :default on the submit button
Firefox supports :default on checkbox, radio AND submit input types.
Internet explorer does not support :default on checkbox, radio or submit input types.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
10	5	4	10	none	none	5

Comments

amin

# June 4, 2014

I am using last version of Browsers. It seems the :default pseudo just work on Firefox.

Jyoti Puri

# November 27, 2014

Hey,

The example of default above is not working in my chrome even.

Chris Cuilla

# August 19, 2016

The HTML is slightly wrong above. The name for the radio inputs should all be the same. For example, they should all be name=”color”.

A2D

# September 27, 2017

Hi, there’s no mention of the select (dropdown) element and any child option elements that are selected when the select is initially rendered. This seems to work fine on Chrome and Safari (OSX and iOS).

With this markup:

<select required>
    <option value="" disabled="disabled" selected="selected">Select a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

and this CSS:

select option:default {
    display: none;
}

You get a dropdown where the first option is displayed like a placeholder, but it is not visible in the options list when displayed.

This also works for the mobile select widgets on Chrome Android and Safari iOS.

Emin Altan

# January 30, 2023

Hi,

What is the difference checked and default pseudo-class cause they look similar? I’m confused. Please someone explain between two property diff.

CSS

* {
  border: none;
}

:checked {
  outline: 3px solid orange;
}

:default {
  outline: 3px solid blue;
}

HTML

<input type="checkbox" checked />
    <!-- While :default pseudo-class defined last in CSS file this style win, when :checked pseudo-class defined in CSS file this last style win -->

More Resources

Browser Support

Comments

Leave a Reply Cancel reply