CSS Reference Pseudo-class

:default 6t4563

:default is a pseudo-class selector used to select and style one or more UI elements that are the default among a set of similar elements. 485q4y

This selector typically applies to context menu items, buttons, and select lists/menus. One example is the default submit button among a set of buttons. Another example is the default option from a pop-up menu. Multiple elements in a select-many group could have multiple :default elements.

Elements selected by :default also include checked checkboxes and radio buttons that have the checked attribute set, and options in a select menu that have the selected attribute set. These elements also match the :checked entry.

Examples 2h2053

/* select and style default button  */
button:default {
    border: 1px dotted #009966;
}

/* select and style default submit input */
input[type="submit"]:default {
    color: green;
}

/* select and style default options in a select list, 
and the label for the default (checked) checkboxes */
input[type="checkbox"]:default + label {
    text-decoration: line-through;
}

option:default {
    background-color: black;
    color: white; 
}
                

Live Demo 6b4m17

The following demo contains a form with different UI elements in it: checkboxes, radio input, and <input>s of type submit as well as buttons of type submit. The :default checkboxes have their labels underlined. If your browser s :default you should be able to see that.

Button inputs and buttons of type="submit" are considered one group, and therefore the first of them is the default and will be styled with a dotted blue border in a ing browser. If you remove the first of these elements, another one will become the default and will get the dotted blue border. Refer to the browser section below for details about browser .

View this demo on the Codrops Playground

Browser 572e63

:default is ed in Chrome 10+, Firefox 4+, Safari 5+, and Opera 10+. It is not ed in Internet Explorer, Android, or iOS.

However, browser for :default differs between browsers. Each browser s (or doesn’t ) using :default on certain UI elements, but not on others.

  • Firefox fully s it: using :default on checkboxes, radio buttons, and submit input types.
  • Opera (pre-webkit) only ed using :default on checkboxes and radio buttons.
  • WebKit-based and Blink-based browsers (including post-WebKit Opera, Safari and Chrome) :default on submit input types but not on checkboxes and radio buttons.
  • Internet Explorer does not :default at all.

Written by

Last updated January 16, 2020 at 6:34 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.