Псевдокласс :default находит элемент формы, установленный по умолчанию для группы объединенных элементов (например, кнопка-переключатель в группе кнопок, выбранных по умолчанию, даже если пользователь выбрал другое значение).
Псевдокласс :default может быть использован только для элементов <button>, <input> (когда type="checkbox" или type="radio") и <option>.
Версия
CSS3
Синтаксис
:default {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
input:default {
box-shadow: 0 0 2px 2px #1c87c9;
}
.example {
margin: 20px auto;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Пример селектора :default</h2>
<div class="example">
<p>Вы любите кофе?</p>
<input type="radio" name="radios" id="ex1" checked>
<label for="ex1">Да</label> <br/>
<input type="radio" name="radios" id="ex2">
<label for="ex2">Нет</label>
</div>
</body>
</html>Рассмотрим другой пример:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</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</h2>
<div class="example">
<form action="#">
<input type="submit" value="Yes">
<input type="submit" value="No">
</form>
</div>
</body>
</html>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 51.0+ | ✕ | 4.0+ | 10.1+ | 38+ |
Практикуйте свои знания
Какие действия выполняет псевдокласс :default в CSS?
Правильный!
Неправильно!