Оформление форм

Поля и кнопки браузер рисует по-своему, и в разных браузерах они выглядят немного по-разному. С помощью CSS формы приводят к единому стилю сайта. Главное при этом — не потерять подсказки, которые нужны пользователю: где фокус, какое поле выключено, где ошибка.

Поля ввода

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

<style>
  .field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin-bottom: 8px;
    font: inherit;
    border: 1px solid silver;
    border-radius: 6px;
  }
</style>
 
<input class="field" placeholder="Имя">
<textarea class="field" rows="3" placeholder="Сообщение"></textarea>

box-sizing: border-box из урока о блочной модели не даёт полю с width: 100% вылезти за край из-за отступов и рамки.

Кнопки

У кнопки обычно убирают стандартную рамку, задают фон и указатель-руку. Состояния :hover и :active показывают, что кнопка отвечает на действия:

<style>
  .btn { padding: 8px 16px; border: none; border-radius: 6px; background: steelblue; color: white; font: inherit; cursor: pointer; }
  .btn:hover { background: royalblue; }
  .btn:active { background: navy; }
</style>
 
<button class="btn">Отправить</button>

Фокус

Поле или кнопка в фокусе — это элемент, который сейчас принимает ввод с клавиатуры. Псевдокласс :focus-visible срабатывает, когда фокус важно показать, например при переходе клавишей Tab:

<style>
  input { padding: 6px 8px; border: 1px solid silver; border-radius: 6px; }
  input:focus-visible { outline: 3px solid lightskyblue; outline-offset: 1px; border-color: steelblue; }
</style>
 
<input placeholder="Нажмите сюда или Tab">

Подсказка, выключенные поля и ошибки

::placeholder оформляет текст-подсказку, :disabled — выключенное поле, :user-invalid — поле с ошибкой после того, как пользователь его заполнил:

<style>
  input { display: block; margin-bottom: 8px; padding: 6px 8px; border: 1px solid silver; border-radius: 6px; }
  input::placeholder { color: slategray; font-style: italic; }
  input:disabled { background: whitesmoke; cursor: not-allowed; }
  input:user-invalid { border-color: crimson; background: mistyrose; }
</style>
 
<input type="email" placeholder="Введите почту и уйдите из поля">
<input placeholder="Поле выключено" disabled>

Напечатайте в первое поле слово без @ и щёлкните мимо — поле покраснеет.

Цвет флажков: accent-color

Флажки, переключатели и ползунки трудно перекрасить обычными свойствами. Одно свойство accent-color меняет их фирменный цвет:

<style>
  form { accent-color: seagreen; }
</style>
 
<form>
  <label><input type="checkbox" checked> Флажок</label>
  <label><input type="radio" checked> Переключатель</label>
  <input type="range">
</form>

Свой флажок: appearance: none

appearance: none отключает стандартный вид элемента, и его можно нарисовать заново как обычный блок. Так делают флажки в стиле сайта:

<style>
  .check {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid seagreen;
    border-radius: 4px;
    vertical-align: middle;
    cursor: pointer;
  }
  .check:checked { background: seagreen; box-shadow: inset 0 0 0 3px white; }
</style>
 
<label><input type="checkbox" class="check"> Запомнить меня</label>

Щёлкните по флажку: отмеченный заливается цветом. Так же у <select> убирают стандартную стрелку и рисуют свою фоновой картинкой.

Частая ошибка

outline: none без замены. Рамку фокуса убирают, потому что она «некрасивая», и человек, который работает с клавиатуры, перестаёт видеть, где он находится. Перейдите по полям клавишей Tab:

<style>
  input { display: block; margin-bottom: 8px; padding: 6px 8px; }
  .bad:focus { outline: none; }
  .good:focus-visible { outline: 3px solid gold; }
</style>
 
<input class="bad" placeholder="Фокус не видно">
<input class="good" placeholder="Фокус видно">

Если стандартная рамка не подходит, замените её своей, но не убирайте совсем.

Спасибо, что читаете!