CSS :optional Псевдокласс
Используйте псевдокласс :optional для выбора необязательных элементов формы. Узнайте о псевдоклассе и практикуйтесь на примерах.
Псевдокласс :optional соответствует каждому элементу управления формой, который пользователь не обязан заполнять. Это полная противоположность :required: элемент управления соответствует либо одному, либо другому, но никогда обоим сразу.
Элемент управления формой считается «необязательным» просто потому, что у него отсутствует атрибут required. На этой странице объясняется, к каким элементам применяется :optional, чем он отличается от связанных псевдоклассов и как использовать его для визуальной подсказки пользователям о том, какие поля можно безопасно пропустить.
К каким элементам применяется :optional?
Только три элемента управления формой, принимающие атрибут required, могут соответствовать :optional:
<input>(кромеtype="hidden",type="range",type="color", кнопок и аналогичных типов, которые не могут быть обязательными)<select><textarea>
Любой из этих элементов без атрибута required соответствует :optional. Элементы, которые в принципе не могут быть обязательными — такие как <div>, <p> или кнопка отправки <button> — никогда не соответствуют этому псевдоклассу.
:optional и :required
Эти два псевдокласса охватывают все потенциально обязательные элементы управления:
| Элемент управления | Соответствует :required | Соответствует :optional |
|---|---|---|
<input required> | да | нет |
<input> | нет | да |
<select required> | да | нет |
<textarea> | нет | да |
Поскольку они никогда не пересекаются, распространённый паттерн — оставлять необязательные поля нейтральными и выделять только обязательные. Или, как в примере ниже, делать необязательные поля более бледными, чтобы они визуально отходили на второй план.
Синтаксис
:optional {
/* CSS declarations */
}Можно соединять :optional с другими селекторами и псевдоклассами (например, :hover, :focus), а также с псевдоэлементами (например, ::after) для создания более сложных состояний:
input:optional:focus {
outline: 2px solid #1c87c9;
}Пример
В примере ниже необязательным полям ввода задаётся приглушённый полупрозрачный вид с осветлением при наведении, тогда как обязательные поля получают жирную нижнюю границу, чтобы разница была очевидна с первого взгляда:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
opacity: 0.5;
transition: .3s;
}
input:optional:hover,
select:optional:hover {
opacity: 1;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:optional selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="text" required />Name *
</label>
<label>
<input type="email" required />Email *
</label>
<label>
<input type="tel" />Phone (optional)
</label>
<label>
<input type="url" />Address (optional)
</label>
</form>
</div>
</body>
</html>Здесь оба псевдокласса — :optional и :required — используются вместе, чтобы два типа полей было легко различить.
Подводные камни
- Кнопки отправки не являются необязательными.
<button>или<input type="submit">не может быть обязательным, поэтому он никогда не соответствует:optional. Стилизуйте кнопки с помощью собственного селектора. - Состояния валидации — отдельная история.
:optionalлишь сообщает, является ли поле обязательным, но не проверяет корректность его значения. Для этого используйте:validи:invalid. - Обновление в реальном времени. Если вы переключаете атрибут
requiredс помощью JavaScript, браузер немедленно пересчитывает соответствие:optional/:required, и стили применяются мгновенно.
Связанные псевдоклассы
:required— противоположность:optional.:validи:invalid— соответствуют элементам управления в зависимости от того, проходит ли их значение валидацию.:enabledи:disabled— соответствуют по интерактивности.:read-only— соответствует элементам управления, которые пользователь не может редактировать.