:default

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:

<ul>
  <li>
    <input type="radio" name="color" value="red" id="red"> 
    <label for="red">red</label>
  </li>
  <li>
    <input type="radio" name="green" value="green" id="green" checked> 
    <label for="green">green</label>
  </li>
  <li>
    <input type="radio" name="blue" value="blue" id="blue"> 
    <label for="blue">blue</label>
  </li>
</ul>

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

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

  1. User Avatar
    amin

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

  2. User Avatar
    Jyoti Puri
    Permalink to comment#

    Hey,

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

  3. User Avatar
    Chris Cuilla
    Permalink to comment#

    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”.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag