:default CSS

Become a Patron!

Псевдокласс :default определяет элемент формы, установленный изначально при загрузке страницы.

Этот псевдокласс может использоваться для <button>, <input type="checkbox">, <input type="radio"> и <option>.

Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use css-default-pseudo? Data on support for the css-default-pseudo feature across the major browsers from caniuse.com.

Синтаксис

/* Selects any default <input> */
input:default {
  background-color: lime;
}

Значения

Группированные элементы, которые допускают множественный выбор, могут также иметь несколько значений :default, то есть они могут иметь несколько элементов, первоначально выбранных. В этом случае все значения по умолчанию представлены с использованием псевдокласса :default. Например, вы можете установить флажки по умолчанию среди группы флажков.

Примеры

HTML

<input type="radio" name="season" id="spring">
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked>
<label for="spring">Summer</label>

<input type="radio" name="season" id="fall">
<label for="spring">Fall</label>

<input type="radio" name="season" id="winter">
<label for="spring">Winter</label>

CSS

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

Результат:

Результат работы псевдокласса :default
Результат работы псевдокласса :default