: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.
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 pseudo-class selector. More about selecting and styling checked inputs in the :checked entry.
Examples
/* 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
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 supports :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 supporting 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 support section below for details about browser support.
Browser Support
:default is supported in Chrome 10+, Firefox 4+, Safari 5+, and Opera 10+. It is not supported in Internet Explorer, Android, or iOS.
However, browser support for :default differs between browsers. Each browser supports (or doesn’t support) using :default on certain UI elements, but not on others.
-
Firefox fully supports it: using
:defaulton checkboxes, radio buttons, and submit input types. -
Opera (pre-webkit) only supported using
:defaulton checkboxes and radio buttons. -
WebKit-based and Blink-based browsers (including post-WebKit Opera, Safari and Chrome) support
:defaulton submit input types but not on checkboxes and radio buttons. -
Internet Explorer does not support
:defaultat all.
