Styling with the :default selector

Github Page

Definitions

The :default pseudo-class applies to the one or more UI elements that are the default among a set of similar elements. The :default pseudo-class must match any element in one of the following categories:

• <button> elements that are their form's default button. A form element's default button is the first submit button in tree order whose form owner is that form element.
• <input> elements whose type attribute is in the Submit Button or Image Button state, and that are their form's default button
• <input> elements to which the checked attribute applies and that have a checked attribute
• <option> elements that have a selected attribute

Sources:

• http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting.html#selector-default
• http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#default-button

Example 1 - button type="submit"

The first <button type="submit"> is the default element, and should have red text.

Example

.example1 button:default {
  color: red;
}

Example 2 - input type="submit"

The first <input type="submit"> is the default element, and should have red text.

Example

.example2 input:default {
  color: red;
}

Example 3 - input type="image"

The first <input type="image"> is the default element, and should have a red border.

Example

.example3 input:default {
  border: 2px solid red;
}

Example 4 - radio - checked - default element should be red text

The first <input type="radio"> element that has a checked attribute is the default element, and should be colored red.

Example

.example4 input:default + label {
  color: red;
}

Example 5 - checkbox - checked - default element should be red text

The first <input type="checkbox"> element that has a checked attribute is the default element, and should be colored red.

Example

.example5 input:default + label {
  color: red;
}

Example 6 - option - selected - default element should be red text

The first <option> element that has a selected attribute is the default element, and should be colored red.

Currently not supported in most modern browsers.

Example

.example6 option:default {
  color: red;
}

Github Page