Skip to content

Дополняет доку про псевдокласс :optional #6027

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DrakesBot12 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Дополняет доку про псевдокласс :optional #6027

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5828d01
docs: optional
DrakesBot12 Jun 11, 2026
afe9011
форматирование
DrakesBot12 Jun 11, 2026
f3aab57
форматирование
DrakesBot12 Jun 11, 2026
138f7f5
Добавляет конфиг baseline
vitya-ne Jul 15, 2026
41707ad
Update index.md
DrakesBot12 Jul 17, 2026
8250630
улучшения
DrakesBot12 Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions css/optional/demos/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Название демо — Title статьи — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
color-scheme: dark;
font-size: 18px;
}

body {
min-height: 100vh;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #18191C;
color: #FFFFFF;
font-family: "Roboto", sans-serif;
}

@media (max-width: 768px) {
body {
padding: 30px;
}
}

form {
display: flex;
flex-direction: column-reverse;
Comment thread
DrakesBot12 marked this conversation as resolved.
Outdated
gap: 1rem;
}

label {
display: flex;
gap: .5rem;
align-items: center;
}

input {
border-radius: 6px;
padding: 4px 8px;
}

input:optional {
border: 2px solid #d77d31;
}

input:required {
border: 2px solid #2e9aff;
}
</style>
</head>
<body>
<div class="container">
<form>
<label>
Имя вашего котика:
<input type="text" name="cat-name">
</label>

<label>
Email:
<input type="email" name="email" required>
</label>
</form>
</div>
</body>
</html>
80 changes: 66 additions & 14 deletions css/optional/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
---
title: "`:optional`"
description: "Показываем, какие поля заполнять необязательно."
description: "Показывает элементы формы, которые не обязательны для заполнения."
baseline:
- group: form-validity-pseudos
features:
- css.selectors.optional
authors:
- inventoris
contributors:
- drakesbot12
keywords:
- псевдокласс
- формы
- optional
- валидация
related:
- html/form
- html/required
Expand All @@ -16,40 +25,83 @@ tags:

## Кратко

С помощью псевдокласса `:optional` можно выбрать элементы, заполнять которые необязательно. Это могут быть [`<input>`](/html/input/), [`<select>`](/html/select/) и [`<textarea>`](/html/textarea/) без атрибута [`required`](/html/required/).
Псевдокласс `:optional` выбирает элементы формы, которые **не являются обязательными для заполнения**.

Он применяется к:
- [`<input>`](/html/input/)
- [`<select>`](/html/select/)
- [`<textarea>`](/html/textarea/)

Если у элемента **нет атрибута [`required`](/html/required/)**, он считается необязательным и попадает под `:optional`.

<aside>

♻️ Существует псевдокласс с обратным значением: [`:required`](/css/required/). С его помощью можно выбрать обязательные к заполнению элементы.
♻️ Противоположный псевдокласс — [`:required`](/css/required/), он выбирает обязательные поля формы.

</aside>

## Пример

```css
input:optional {
border: 2px solid #d77d31;
}

input:required {
border: 2px solid #2e9aff;
}
Comment thread
DrakesBot12 marked this conversation as resolved.
```

```html
<form>
<label>Имя вашего котика: <input></label>
<label>
Имя вашего котика:
<input type="text" name="cat-name">
</label>

<label>
Email:
<input type="email" name="email" required>
</label>
</form>
```

```css
input:optional {
border-color: #d77d31;
}
```
<iframe title="Демонстрация применения стилей :optional и :required" src="demos/basic/" height="200"></iframe>

## Как пишется

Выбираем элемент без атрибута `required` и в селекторе используем `:optional`:
Псевдокласс применяется к полям формы, у которых **не указан атрибут `required`**:

```css
textarea:optional {
color: black;
input:optional {
background-color: #fff8f1;
}
```

## Как понять

В формах важно визуально отмечать, какие поля следует обязательно заполнить, а какие можно пропустить. Так пользователям не придётся заполнять лишнее.
Браузер автоматически определяет, какие поля формы обязательны для заполнения.

- Если у элемента есть атрибут `required`, он считается обязательным
- Если атрибута нет — поле считается необязательным и попадает под `:optional`

Это позволяет:

Псевдокласс `:optional` помогает улучшить опыт взаимодействия с формой. Визуально отмечаем, что нам не так уж нужно знать, и экономим драгоценное время и нервы пользователя.
- визуально отделять важные поля от второстепенных
- улучшать UX форм
- уменьшать когнитивную нагрузку пользователя

## Подсказки

💡 Псевдокласс работает только с элементами формы, а не с любыми HTML-элементами.
💡 `:optional` удобно использовать для стилизации второстепенных полей — например, дополнительных данных профиля.
💡 Часто комбинируется с `:required`, чтобы явно разделить визуально важные и необязательные поля:
```css
input:required {
border-color: #2e9aff;
}

input:optional {
border-color: #d77d31;
}
```
Loading