Формы и элементы управления: стилизация input, button, select и других тегов

Почему формы — это сердце веба? ❤️

Формы окружают нас повсюду: поисковые строки, логины, регистрации, чаты. Но стандартные стили браузера делают их скучными. Давайте превратим серые input и button в элементы, которые цепляют глаз и улучшают UX!

Базовые принципы стилизации

Перед тем как нырять в код, запомните три правила:
1. Консистентность — все элементы формы должны выглядеть как часть одного дизайна.
2. Доступность — стили не должны ломать usability (например, скрывать :focus).
3. Адаптивность — формы должны работать на любом устройстве.

💡 Совет: Используйте box-sizing: border-box для всех элементов формы, чтобы padding и border не ломали вёрстку.

Стилизация input и textarea

Стандартные текстовые поля выглядят уныло, но их можно оживить буквально в несколько строк CSS:

input[type="text"],
textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Arial', sans-serif;
  transition: border-color 0.3s;
}

input[type="text"]:focus,
textarea:focus {
  border-color: #6200ee; /* Красиво подсвечиваем при фокусе */
  outline: none; /* Убираем стандартный синий контур */
}

🔹 Что мы сделали?
- Убрали резкие углы (border-radius).
- Добавили плавную анимацию при фокусе (transition).
- Использовали outline: none аккуратно, чтобы не сломать доступность (но можно заменить на box-shadow).

⚠️ Важно: Не удаляйте :focus-стили полностью — это важно для клавиатурной навигации!

Кнопки (button) — оживляем интерфейс

Кнопки — это призывы к действию. Они должны выделяться, но не кричать.

button {
  background: #6200ee;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
}

button:hover {
  background: #3700b3;
}

button:active {
  transform: scale(0.98); /* Эффект нажатия */
}

🔹 Эффекты, которые работают:
- Плавное изменение цвета (transition).
- Микроанимация при клике (transform: scale).
- Курсор-указатель (cursor: pointer).

Стилизация select — выпадающие списки

<select> сложно кастомизировать, но возможно:

select {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background-color: white;
  appearance: none; /* Убираем стандартный вид */
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23626262" ... />'); /* Кастомная стрелка */
  background-repeat: no-repeat;
  background-position: right 12px center;
}

🔹 Почему appearance: none?
Без него нельзя полностью переопределить стрелку. Но если нужна кросс-браузерность, можно использовать JavaScript-библиотеки вроде choices.js.

Чекбоксы и радио-кнопки

Стандартные checkbox и radio трудно стилизовать, но есть хитрость: прячем исходный элемент и рисуем свой через ::before/::after.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

input[type="checkbox"]:checked {
  background-color: #6200ee;
  border-color: #6200ee;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  color: white;
  position: absolute;
  left: 4px;
  top: 0;
}

🔹 Как это работает?
- Скрываем дефолтный чекбокс (appearance: none).
- Рисуем свой квадрат с рамкой.
- Добавляем галочку через ::after при :checked.

Готовый пример: форма входа

Объединим всё в одном красивом компоненте:

.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 12px;
  background: #f9f9f9;
}

.form-group {
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

/* + стили input, button из примеров выше */

<div class="form-container">
  <div class="form-group">
    <label>Email</label>
    <input type="email" placeholder="your@email.com">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password">
  </div>
  <button type="submit">Log In</button>
</div>

Итог: какие приёмы запомнить?

✅ Консистентность — все элементы в одном стиле.
✅ Плавность — анимация hover/focus.
✅ Контроль состояния — :hover, :active, :focus.
✅ Доступность — не ломаем tab-навигацию.

Теперь ваши формы будут не только функциональными, но и красивыми. 🎨 Если хотите больше практики, посмотрите разборы Данилы Бежина на YouTube.