CSS :default Pseudo Class
The :default pseudo-class matches the default element in a group of associated elements, such as the radio button in a group of buttons that are selected by default, even if the user has selected a different value.
This pseudo-class can only be used on the <button>, <input> (when type="checkbox" or type="radio") and <option> elements.
Version ¶
HTML Living Standard
HTML5
Selectors Level 4
Syntax¶
:default {
css declarations;
}Example of the :default selector used for the <input> tag:¶
<!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 of the :default selector used for the <input> tag with a type attribute:¶
<!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>
0 Comments
CAN FEEDBACK
Emoji