Как разбить телефонный ввод на разные ящики (по одному на каждый ящик) с помощью css

Question

Я хочу разбить каждый введенный номер на отдельные поля. Я хочу это для визуального взгляда.

Например, когда мы заполняем формы, каждая буква находится в коробке (1 буква в коробке). Есть ли способ сделать это в CSS.

Пожалуйста, обратитесь к изображению ниже и посмотрите на ввод для PAN, Дата формирования.

Я хочу реализовать то же самое, используя css, чтобы при вводе пользователем каждая буква появлялась в соответствующем блоке.

Answer 1

Вы можете создать линии, используя фоновый градиент, и наложить их поверх ввода. Вам нужно будет использовать моноширинный шрифт, чтобы все выровнялось. И вам также необходимо установить maxlength на входе.

.input-wrapper {
  position: relative;
  font-size: 2rem;
  font-family: monospace;
}

.lines {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  
  /* create lines */
  background-image: linear-gradient(
  to right, 
  black 1px, 
  transparent 1px);
  background-size: 2ch;
}

input {
  display: block;
  box-sizing: border-box;
  border-width: 0 1px 1px;
  border-color: black;
  border-style: solid;
  font: inherit;
  
  padding: .25ch .5ch;
  letter-spacing: 1ch;
  max-width: 20ch;
}


/* for demo, ignore */
body {
  margin: 0;
  display: grid;
  place-content: center;
  min-height: 100vh;
}

<div class="input-wrapper">
  <input type="tel" maxlength="9">
  <span class="lines"></span>
</div>