Загрузка...

Элементы форм в CSS

Формы — место, где люди вводят, выбирают и отправляют. CSS может сделать input, textarea и select яснее и спокойнее — читаемый padding, аккуратные границы и заметный признак фокуса — пока HTML сохраняет смысл.

Набор для элементов форм

📊 Элементы форм одним взглядом

Часть Повседневная роль
input / textarea / select Основные элементы, которые стилизуют вместе
padding + border Дать полю место и чёткий край
border-radius Смягчить углы
:focus-visible Показать кольцо фокуса для клавиатуры/указателя
:disabled Приглушить поля, которые сейчас нельзя править

Стилизуйте общий класс (или группу элементов) один раз, чтобы каждое поле выглядело из одной семьи. Внешний вид кнопок — в следующем уроке.

Текстовые поля — место и границы

Стандартные поля браузера часто выглядят по-разному на устройствах. Задайте ширину, padding, размер шрифта и лёгкую границу — так удобнее печатать.

Базовое текстовое поле

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea — место для текста

Textarea нужны высота и тот же язык padding, что у input. Разрешите вертикальный resize для длинных ответов; зафиксируйте, если макет должен остаться жёстким.

Удобный textarea

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select — та же семья

Выпадающие списки должны делить границу, радиус и padding с текстовыми полями, иначе форма выглядит собранной из кусков.

Select в той же семье

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Фокус, который видно

Никогда не убирайте стили фокуса без замены. :focus-visible рисует ясное кольцо для клавиатуры и держит вид спокойным.

Видимое кольцо фокуса

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

Отключённые поля

Элементы disabled должны выглядеть недоступными — меньшая непрозрачность или приглушённый фон — не исчезая из макета.

Тон disabled

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

Спокойная привычка для полей

Держите общий стиль поля, уважайте отступ у подписи, сохраняйте фокус и оставьте косметику кнопок уроку Buttons.

Общий класс поля

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Попробуйте сами

  1. Стилизуйте текстовые/email-поля с padding, border и border-radius.
  2. Согласуйте textarea; задайте resize: vertical.
  3. Стилизуйте select той же семьёй границ.
  4. Добавьте outline :focus-visible + цвет границы — не оставляйте голый outline: none.
  5. Приглушите :disabled input и проверьте, что он всё ещё читается как поле.

Частые ошибки

  • outline: none без замены фокуса (пользователи клавиатуры теряются)
  • Крошечный padding/шрифт, из‑за которого печатать на телефоне больно
  • Разный стиль каждого элемента — форма выглядит случайной
  • Превращать этот урок в дизайн кнопок (это следующий)
  • Смешивать с border-collapse / зеброй таблиц (прошлый сеанс)

Кратко

  • Общие padding, граница и радиус объединяют input, textarea и select
  • Дайте textarea высоту и разумный resize
  • Держите видимый признак :focus-visible
  • Приглушайте поля :disabled; не прячьте их
  • Косметику кнопок оставьте следующему уроку

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 33 из 35
Css Урок