Псевдоклассы CSS для полей формы

40

Ниже приведён полный список основных псевдоклассов, применимых к элементам форм (input, textarea, select и др.), с описанием их назначения и примерами настройки в CSS.

:enabled и :disabled

Описание:
— :enabled — для элементов формы, доступных для взаимодействия.
— :disabled — для заблокированных элементов (атрибут disabled).
Пример настройки:

CSS
input:enabled {
  background-color: #fff;
}
input:disabled {
  background-color: #eee;
  color: #999;
}

:readonly и :read-write

Описание:
— :readonly — для полей с атрибутом readonly.
— :read-write — для полей без readonly (т.е. доступных для редактирования).
Пример настройки:

CSS
textarea:readonly {
  border-color: #ccc;
  background-color: #f9f9f9;
}
textarea:read-write {
  border-color: #66afe9;
}

:required и :optional

Описание:
— :required — для обязательных полей (атрибут required).
— :optional — для необязательных полей.
Пример настройки:

CSS
input:required {
  outline: 2px solid #c00;
}
input:optional {
  outline: 2px solid #090;
}

:in-range и :out-of-range

Описание:
— :in-range — значение числового поля (type=»number» или type=»range») находится внутри заданных min…max.
— :out-of-range — значение выходит за пределы.
Пример настройки:

CSS
input[type="number"]:in-range {
  border-color: #090;
}
input[type="number"]:out-of-range {
  border-color: #c00;
}

:valid и :invalid

Описание:
— :valid — значение поля прошло встроенную проверку (pattern, type, required и т.п.).
— :invalid — не соответствует требованиям валидации.
Пример настройки:

CSS
input:valid {
  background-image: url('checkmark.svg');
  background-repeat: no-repeat;
  background-position: right center;
}
input:invalid {
  background-image: url('cross.svg');
}

:checked и :indeterminate

Описание:
— :checked — для отмеченных чекбоксов и радиокнопок.
— :indeterminate — для состояния «частично выбран» у чекбоксов (устанав­ливается через JS).
Пример настройки:

CSS
input[type="checkbox"]:checked + label {
  font-weight: bold;
}
input[type="checkbox"]:indeterminate + label {
  color: orange;
}

:placeholder-shown

Описание:
Применяется к полю, если в нём отображается плейсхолдер (пустое значение).
Пример настройки:

CSS
input:placeholder-shown {
  color: #aaa;
}

:focus, :focus-visible и :focus-within

Описание:
— :focus — когда элемент формы в фокусе.
— :focus-visible — когда браузер отображает фокус (например, при навигации с клавиатуры).
— :focus-within — когда любой вложенный элемент внутри контейнера имеет фокус.
Пример настройки:

CSS
input:focus {
  border-color: #66afe9;
  box-shadow: 0 0 3px rgba(102,175,233,.6);
}
input:focus-visible {
  outline: 2px dashed #66afe9;
}
.form-group:focus-within {
  background-color: #f0f8ff;
}

Универсальные псевдоклассы (контекстные)

Хотя применимы не только к формам, часто используются для интерактивности полей:

  • :hover — при наведении курсора.
  • :active — при нажатии.
    Пример настройки:
CSS
button:hover {
  background-color: #0053ba;
}
button:active {
  transform: translateY(1px);
}

Итог: знание этих псевдоклассов позволяет гибко настраивать стилизацию формы в зависимости от её состояния, улучшая UX и визуальную обратную связь для пользователя.

Связанные записи