Всё самое важное о псевдоклассе :default

Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Что делает :default

Псевдокласс выбирает тот элемент формы, который установлен по умолчанию — например, через атрибут checked у radio или selected у option. Вы можете применить стили только к этому элементу, не трогая остальные.

Простой пример:

<form>
  <label><input type="radio" name="color" value="red" checked> Красный</label>
  <label><input type="radio" name="color" value="green"> Зелёный</label>
  <label><input type="radio" name="color" value="blue"> Синий</label>
</form>

input:default {
  outline: 2px solid #4CAF50;
}

В этом случае только первый input (checked) получит зелёную рамку. Остальные останутся без изменений.

Где работает :default

Псевдокласс применяется к:

• радиокнопкам (input[type="radio"]),
• чекбоксам (input[type="checkbox"]),
• пунктам списка (option) внутри <select>,
• кнопкам submit, если она назначена по умолчанию при отправке формы.

Например:

<select name="payment">
  <option selected>Карта</option>
  <option>Наличные</option>
</select>

option:default {
  background-color: #e0f7fa;
}

Выпадающий список отобразит фон у предустановленного значения.

Особенности и нюансы

• Работает только с элементами внутри формы.
• Учитывает начальное состояние: не реагирует на динамическое изменение пользователем (для этого нужен JS).
• Не применяется к input[type="text"], textarea и другим полям без фиксированного выбора.
• Визуальное оформление зависит от браузера — некоторые игнорируют нестандартные стили в <option>.

Почему это удобно

С помощью :default можно:

• Подсветить начальный выбор без дублирования логики в JavaScript.
• Создать более наглядную и доступную форму.
• Упростить стили для динамических форм с предустановками.

Это особенно актуально для опросов, форм входа, конфигураторов и других сценариев, где важно быстро показать выбранное значение.

Совместимость

Псевдокласс :default поддерживается всеми современными браузерами, включая Chrome, Firefox, Edge и Safari. Не требует префиксов и работает с большинством форм без дополнительных настроек.

Заключение

:default — это удобный способ стилизовать предустановленные значения в формах. Он помогает визуально выделить текущий выбор, повысить читаемость интерфейса и улучшить пользовательский опыт. Не требует скриптов и отлично сочетается с другими псевдоклассами (:checked, :hover, :focus).

Если вы делаете форму с радиокнопками, выпадающими списками или хотите показать «стартовый» вариант — используйте :default и сделайте интерфейс понятнее с первого взгляда.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.