Стилизация поля ввода как разделенного ввода

Существует множество методов создания серии разделенных полей ввода. Один метод использует «буквенный интервал» для разделения символов в одном поле ввода. Кроме того, стили «background-image» и «border-bottom» могут еще больше усилить иллюзию нескольких полей ввода.

Фрагмент CSS

Следующий код CSS демонстрирует, как для создания желаемого эффекта:

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline: none;
}

Реализация HTML

Чтобы использовать этот CSS, просто добавьте на свою страницу следующий HTML-код: