`:default` CSS-псевдокласс

:default CSS псевдокласс выбирает элементы формы, являющиеся значениями по умолчанию в группе связанных элементов.

Попробуйте

label,
input[type="submit"] {
  display: block;
  margin-top: 1em;
}

input:default {
  border: none;
  outline: 2px solid deeppink;
}

<form>
  <p>How did you find out about us?</p>
  <label
    ><input name="origin" type="radio" value="google" checked /> Google</label
  >
  <label><input name="origin" type="radio" value="facebook" /> Facebook</label>
  <p>Please agree to our terms:</p>

  <label
    ><input name="newsletter" type="checkbox" checked /> I want to subscribe to
    a personalized newsletter.</label
  >

  <label
    ><input name="privacy" type="checkbox" /> I have read and I agree to the
    Privacy Policy.</label
  >

  <input type="submit" value="Submit form" />
</form>

Какие элементы выбирает этот селектор, определено в стандарте HTML §4.16.3 «Псевдоклассы» — он может выбирать элементы <button>, <input type="checkbox">, <input type="radio"> и <option>:

• Элементом option по умолчанию является первый элемент с атрибутом selected или первый доступный для выбора элемент option в порядке DOM. multiple У элементов <select> может быть несколько элементов option selected, поэтому все они будут соответствовать :default.
• Элементы <input type="checkbox"> и <input type="radio"> соответствуют селектору, если у них есть атрибут checked.
• Элемент <button> соответствует селектору, если он является <form> кнопкой отправки по умолчанию: первым элементом <button> в порядке DOM, принадлежащим этой форме. Это также относится к типам элементов <input>, отправляющим формы, например image или submit.

Синтаксис

:default {
  /* ... */
}

Примеры

HTML

<fieldset>
  <legend>Favorite season</legend>

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

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

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

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

CSS

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

input:default + label {
  color: coral;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Веб-формы — работа с пользовательскими данными
• Стилизация веб-форм
• Связанные элементы HTML: <button>, <input type="checkbox">, <input type="radio"> и <option>