:default
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
CSS псевдокласс :default находит элемент формы, установленный по умолчанию для группы связанных элементов.
Этот селектор используется для элементов: <button>, <input type="checkbox">, <input type="radio">, и <option> .
css
/* Выбрать установленный по умолчанию среди <input> */
input:default {
background-color: lime;
}
Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс :default найдёт все эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.
Синтаксис
:default
Пример
HTML
html
<input type="radio" name="season" id="spring" />
<label for="spring">Spring</label>
<input type="radio" name="season" id="summer" checked />
<label for="summer">Summer</label>
<input type="radio" name="season" id="fall" />
<label for="fall">Fall</label>
<input type="radio" name="season" id="winter" />
<label for="winter">Winter</label>
CSS
css
input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}
Результат
Спецификации
| Specification |
|---|
| HTML # selector-default |
| Selectors Level 4 # default-pseudo |
Совместимость с браузерами
Loading…