RT
Все инструменты
На главную

CSS и вёрстка

Поля ввода

Поле с плавающей подписью, иконкой и состояниями фокуса, ошибки и блокировки. Три вида оформления: с рамкой, с заливкой и одним подчёркиванием.

Загрузить пример

Заготовки

Настройки

Рамка по всему периметру — самый привычный вид.

Плавающая подпись держится на селекторе :not(:placeholder-shown). У поля обязан быть placeholder=" " — с пробелом. Без него подпись никогда не поднимется и накроет введённый текст.

Превью

Обычное

Пришлём счёт и договор на этот адрес

С ошибкой

Похоже, в адресе опечатка

Заблокированное

Пришлём счёт и договор на этот адрес

CSS

.field {
  position: relative;
  display: block;
  width: 100%;
}

.field input {
  width: 100%;
  height: 52px;
  padding: 20px 14px 6px 45px;
  font-family: inherit;
  font-size: 15px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.field input[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}

.field input:disabled {
  background: #f2f2f2;
  color: #878b95;
  cursor: not-allowed;
}

.field label {
  position: absolute;
  left: 45px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #64748b;
  pointer-events: none;
  transition: top 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: 9px;
  transform: none;
  font-size: 11px;
  color: #2563eb;
}

.field .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #64748b;
  pointer-events: none;
}

.field .field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

HTML

<div class="field">
  <svg class="field-icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
  <input id="email" type="email" placeholder=" ">
  <label for="email">Рабочая почта</label>
  <span class="field-hint">Пришлём счёт и договор на этот адрес</span>
</div>

Ошибку помечайте атрибутом aria-invalid="true", а не одним красным цветом: цвет не читается скринридером и не виден при дальтонизме.