Стилизация форм

CSS позволяет стилизовать все элементы форм: input, button, select, textarea. Псевдо-классы :focus, :invalid, :valid, :disabled управляют состояниями. Кастомные чекбоксы/radio создаются через ::before/::after и opacity: 0.

Базовая стилизация форм:

/* Сброс стилей браузера */ input, button, select, textarea { font: inherit; color: inherit; }

/* Text input */ input[type="text"], input[type="email"], textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: white; transition: border-color 0.2s; }

input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); }

/* Валидация */ input:invalid:not(:placeholder-shown) { border-color: var(--error); }

input:valid:not(:placeholder-shown) { border-color: var(--success); }

/* :placeholder-shown — чтобы не показывать ошибку при пустом поле */

Кастомные чекбоксы:

• Скрыть нативный input (opacity: 0)
• Создать визуальный элемент через ::before
• Использовать :checked для состояния

Стилизация форм — как дизайн анкеты. Каждое поле — как окошко в бланке: рамка (border), подсветка при заполнении (focus), зелёная галочка (valid), красный крестик (invalid).

**Самый простой:**

input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

input:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

button {
  padding: 0.75rem 1.5rem;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Базовая стилизация input и button.

**Простой:**

/* Валидация */
.input-group {
  margin-bottom: 1rem;
}

.input-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.input-group input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(52,152,219,0.15);
  outline: none;
}

.input-group input:invalid:not(:placeholder-shown) {
  border-color: var(--error);
}

.input-group .error-text {
  color: var(--error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: none;
}

.input-group input:invalid:not(:placeholder-shown) ~ .error-text {
  display: block;
}

Форма с валидацией и сообщениями об ошибках.

**Реальный пример:**

/* Кастомный checkbox */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-wrapper .checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 4px;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}

.checkbox-wrapper .checkmark::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s;
}

.checkbox-wrapper input:checked + .checkmark {
  background: var(--primary);
  border-color: var(--primary);
}

.checkbox-wrapper input:checked + .checkmark::after {
  transform: rotate(-45deg) scale(1);
}

.checkbox-wrapper input:focus-visible + .checkmark {
  box-shadow: 0 0 0 3px rgba(52,152,219,0.3);
}

Кастомный checkbox с CSS-анимацией.

**Неправильно:** Убирать outline без альтернативы

**Почему:** outline: none без :focus стиля делает поле недоступным для клавиатурной навигации.

**Правильно:** Замените outline на box-shadow или border-color при :focus. Никогда не убирайте фокус!

**Неправильно:** Не стилизовать :focus

**Почему:** Пользователи с клавиатурой не видят, какое поле активно. Это нарушение доступности.

**Правильно:** Всегда стилизуйте :focus: border, box-shadow или outline.

**Неправильно:** Использовать :invalid на пустых полях

**Почему:** Пустое поле required сразу показывает ошибку (красный). Пользователь не успел ввести данные.

**Правильно:** Используйте :invalid:not(:placeholder-shown) — показывать ошибку только после ввода.

• font: inherit — сброс шрифта для единообразия
• :focus обязателен для доступности
• box-shadow вместо outline для :focus
• :invalid:not(:placeholder-shown) — ошибка после ввода
• Кастомные чекбоксы: opacity: 0 + ::before/::after

Назад: Вы знаете CSS-переменные (C18) — стилизация форм применяет дизайн-систему к интерактивным элементам.

Вперёд: В следующем уроке (C20) вы изучите адаптивный дизайн и медиа-запросы.