Как оформить поля ввода
Короткий ответ
Задайте полю рамку, отступы, скругление и шрифт, а при фокусе меняйте цвет рамки:
<style>
.field { padding: 10px 12px; border: 1px solid silver; border-radius: 8px; font: inherit; }
.field:focus { border-color: steelblue; outline: 3px solid lightblue; }
</style>
<input class="field" type="text" placeholder="Your name">font: inherit важен: по умолчанию поля используют свой системный шрифт и размер, отличный от текста страницы.
Поле на всю ширину
Чтобы поле занимало всю ширину формы и не вылезало за неё из-за отступов, добавьте box-sizing: border-box:
<style>
.field { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid silver; border-radius: 8px; font: inherit; }
</style>
<form style="display: grid; gap: 8px; max-width: 300px;">
<input class="field" type="email" placeholder="Email">
<textarea class="field" rows="3" placeholder="Message"></textarea>
</form>Все поля сразу
Чтобы не вешать класс на каждое поле, используйте селектор по типу: input:not([type="checkbox"], [type="radio"]), textarea, select. Флажки и переключатели оформляются иначе, поэтому их исключают.
Частая ошибка
Полю задают width: 100% и padding, но не box-sizing: border-box. Отступы прибавляются к ширине, и поле вылезает за правый край формы:
<div style="width: 240px; border: 1px dashed tomato;">
<input type="text" placeholder="Too wide" style="width: 100%; padding: 10px;">
</div>Функции из этого ответа
- <input> — Поле ввода; вид поля задаёт атрибут `type`.
- <textarea> — Многострочное текстовое поле.
- border — Рамка вокруг элемента: толщина, стиль и цвет в одном свойстве.
- :focus — Срабатывает у элемента, на котором сейчас фокус: поле, в которое вводят текст, кнопка, выбранная клавишей Tab.
- box-sizing — Входят ли в `width` и `height` внутренние отступы и рамка.