:required
Срабатывает у полей с атрибутом `required`; `:optional` — у полей без него.
Синтаксис
input:required { … }Примеры
Обязательные поля помечены красной полосой:
<style>
input:required { border-left: 4px solid crimson; }
input:optional { border-left: 4px solid lightgray; }
</style>
<p><input placeholder="Email (required)" required></p>
<p><input placeholder="Phone (optional)"></p>Примечания
У <input> не бывает ::before и ::after, поэтому звёздочку «обязательно» обычно ставят у <label>, например через label:has(+ input:required)::after.
См. также
- :valid — `:valid` срабатывает у поля, значение которого проходит встроенные проверки, `:invalid` — у поля, которое их не проходит.
- :user-invalid — Срабатывает у ошибочного поля только после того, как пользователь с ним поработал; `:user-valid` — наоборот.
- ::after — Создаёт виртуальный последний дочерний элемент — для значков, пометок и украшений после содержимого.
Вопросы и ответы по теме
В учебнике
- Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.