Псевдокласс CSS :default
Используйте псевдокласс CSS :default для выбора и стилизации элементов по умолчанию. Читайте о псевдоклассе и практикуйтесь на примерах.
Псевдокласс :default соответствует элементу по умолчанию в группе связанных элементов управления формы — тому, который браузер отправит (или предварительно выберет), если пользователь ничего не изменит. Типичный пример — переключатель, изначально выбранный через атрибут checked.
Ключевое различие — между состоянием по умолчанию и текущим состоянием:
:defaultсоответствует элементу, который был элементом по умолчанию при загрузке страницы, и продолжает соответствовать ему даже после того, как пользователь выбрал что-то другое.:checkedсоответствует тому, что в данный момент выбрано, поэтому он перемещается по мере взаимодействия пользователя.
В группе переключателей с одной кнопкой checked псевдокласс :default всегда нацелен на эту исходную кнопку, тогда как :checked следует за выбором пользователя. Это делает :default полезным для обозначения «это рекомендуемый/исходный вариант» без изменения стиля при кликах пользователя.
Область применения
:default соответствует только следующим элементам:
<button>— кнопка отправки формы по умолчанию (первая кнопка типа submit).<input>сtype="checkbox"илиtype="radio"— флажок/переключатель, установленный по умолчанию черезchecked.<input>сtype="submit"илиtype="image"— элемент управления отправкой формы по умолчанию.<option>— параметр с атрибутомselected.
Псевдокласс не применяется к текстовым полям ввода, самому элементу <select> или любым элементам вне формы.
Версия
Синтаксис
:default {
/* CSS declarations */
}Практически всегда его комбинируют с селектором элемента или атрибута, чтобы правило применялось только к нужному элементу управления, например input:default или input[type="submit"]:default.
Пример с переключателем, выбранным по умолчанию
Переключатель, отмеченный checked, сохраняет синее свечение даже после того, как вы выберете No, поскольку :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>Пример с кнопкой отправки по умолчанию
Первая кнопка отправки формы является её элементом управления по умолчанию — нажатие Enter в поле активирует именно её. Здесь :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>Пример с выбранным по умолчанию параметром
Для меню <select> псевдокласс :default нацелен на элемент <option> с атрибутом selected — значение, отображаемое до того, как пользователь открыл список.
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>Здесь Medium стилизован, поскольку имеет атрибут selected, даже после того, как пользователь выбирает другой размер.
Примечания и особенности
- Один элемент по умолчанию в группе. В группе переключателей должен быть не более одного элемента по умолчанию; если отметить несколько как
checked, в DOM элементом по умолчанию будет только последний. :defaultстатичен,:checked— динамичен. Используйте:defaultдля обозначения исходного/рекомендуемого варианта, а:checked— для реакции на текущий выбор пользователя.- Кнопки отправки. Только первый элемент управления типа submit в форме является элементом по умолчанию, поэтому
:defaultсоответствует одной кнопке, даже если их несколько. - Комбинируйте с псевдоклассами состояния, такими как
:disabled,:enabled,:requiredи:optional, чтобы создавать понятные, полностью стилизованные формы.
Поддержка браузерами
:default поддерживается всеми современными браузерами, включая Chrome, Firefox, Safari и Edge.