CSS :default Pseudo Class
Use the :default CSS pseudo-class for selecting and styling the default elements. Read about the pseudo-class and practice with examples.
The :default pseudo-class matches the default element in a group of associated form controls — the one the browser would submit (or pre-select) if the user changes nothing. A typical example is the radio button that starts out selected through the checked attribute.
The key distinction is between default and current state:
:defaultmatches the element that was the default at page load, and it keeps matching that element even after the user picks something else.:checkedmatches whatever is currently selected, so it moves as the user interacts.
In a radio group with one checked button, :default always targets that original button, while :checked follows the user's choice. This makes :default useful for hinting "this is the recommended/original option" without re-styling as the user clicks around.
Where it applies
:default only matches these elements:
<button>— the default submit button of a form (the first submit button).<input>withtype="checkbox"ortype="radio"— a checkbox/radio that ischeckedby default.<input>withtype="submit"ortype="image"— the form's default submit control.<option>— an option carrying theselectedattribute.
It has no effect on text inputs, <select> itself, or any non-form element.
Version
Syntax
:default {
/* CSS declarations */
}You almost always combine it with an element or attribute selector so the rule only hits the control you mean, for example input:default or input[type="submit"]:default.
Example with a default-checked radio button
The radio marked checked keeps the blue glow even after you select No, because :default remembers the load-time default.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:default {
box-shadow: 0 0 2px 2px #1c87c9;
}
.example {
margin: 20px auto;
font-size: 20px;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<p>Do you like coffee?</p>
<input type="radio" name="radios" id="ex1" checked />
<label for="ex1">Yes</label>
<br />
<input type="radio" name="radios" id="ex2" />
<label for="ex2">No</label>
</div>
</body>
</html>Example with the default submit button
A form's first submit button is its default control — pressing Enter in a field activates it. Here :default outlines that first button so users can see which action runs by default.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 700px;
}
input[type=submit] {
padding: .6em 1em;
font-size: 1em;
width: 100px;
margin-bottom: 1em;
}
input[type=submit]:default {
border: 4px dotted #8ebf42;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<form action="#">
<input type="submit" value="Yes" />
<input type="submit" value="No" />
</form>
</div>
</body>
</html>Example with a default-selected option
For a <select> menu, :default targets the <option> that has the selected attribute — the value shown before the user opens the dropdown.
option:default {
font-weight: bold;
color: #1c87c9;
}<label for="size">Size:</label>
<select id="size">
<option>Small</option>
<option selected>Medium</option>
<option>Large</option>
</select>Here Medium is styled because it carries the selected attribute, even after the user chooses a different size.
Notes and gotchas
- One default per group. A radio group should have at most one default; if you mark several
checked, only the last one is the default in the DOM. :defaultis static,:checkedis live. Use:defaultto flag the original/recommended choice and:checkedto react to the user's current selection.- Submit buttons. Only the first submit-type control in a form is the default, so
:defaultmatches one button even when several exist. - Pair it with state pseudo-classes like
:disabled,:enabled,:required, and:optionalto build clear, fully-styled forms.
Browser support
:default is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.