Разделить ввод текста на несколько ячеек с помощью CSS

Question

Мне нужно разделить ввод на несколько ячеек. Я хочу нарисовать несколько блоков и при каждом нажатии пользователем один из блоков заполнится. Примерно так:

Как правильно это сделать?

Это код вида:

  <div class="wrap-log-in-form" *ngIf="step == 'pass'">      

  <input type="text" class="spliting-input"  maxlength="6">

  <div class="buttens-log-in"> 
      <input type="button" value="אמת">
      <input type="button" value="קבל הודעה בטלפון">      
  </div>
</div>

Answer 1

Вы можете использовать фоновое изображение CSS на input и попытаться использовать letter-spacing, чтобы текст попал в нужные области, НО это действительно сложно и не очень удачное решение.

Проблема в том, что каждое устройство и браузер отображают символы немного по-разному, поэтому интервал всегда немного отключен.Это довольно странно, но работает, если у вас есть доступ только к CSS.

Лучшее решение

Используйте Javascript для анализа ввода и разделения каждого символа на его собственный элементс уникальным размещением и фоновым стилем.