:default Back

• :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.

Case 1: default submit buttons

• Button inputs and buttons of type="submit" are considered one group, and therefore the first of them is the default.

<input type="submit" value="Submit (<input>)">
<button type="submit">Submit (<Button>)</button>

input[type="submit"] {
    color: #fff;
    border-radius: 4px;
    background-color: #f0f0f0;
}

input[type="submit"]:default {
    background-color: #a10000;
}

button[type="submit"] {
    color: #fff;
    border-radius: 4px;
    background-color: #f0f0f0;
}

button[type="submit"]:default {
    background-color: #a10000;
}

See the Pen xZXOxQ by aleen42 (@aleen42) on CodePen.

Case 2: default checkboxes and radio buttons

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

<input type="radio" id="box-1"><label for="box-1">default radio buttons</label>
<input type="checkbox" id="box-2"><label for="box-2">default checkboxes</label>

input[type="checkbox"]:default + label {
    text-decoration: underline;
}

input[type="checkbox"]:default + label {
    text-decoration: underline;
}

See the Pen MKEejV by aleen42 (@aleen42) on CodePen.