Как реализовать чёрточки между символами в input?

Question

[Иван Колчев]

Здравствуйте. Подскажите пожалуйста ,как реализовать такие чёрточки в input между символами

Comments

[Rustam Bainazarov]

Повторяющийся градиент на фон.

[Иван Колчев]

Рустам Байназаров,хм интересно, спасибо вам большое)

[Rustam Bainazarov]

vanyaweb, написал ответ.

Answer 1

[Rustam Bainazarov]

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

UPDATE №1. Шрифт должен быть моноширинным.

UPDATE №2. Есть проблема из-за letter-spacing у последнего символа в input'е (появляется прокрутка). Хак с отрицательным margin на ширину letter-spacing тут не сработает. Я знаю только один вариант исправления этого — div как обертка и блок внутри с тем самым хаком и contenteditable. Т. е. нужно будет настраивать JS для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею: