Как выделить каждый вводимый в input символ?

Question

[Павел]

Здравствуйте!
Как возможно реализовать такой input, как на скриншоте ниже?

Думал через background для input'a. Нарисовал пунктирную линию и выбрал repeat-x. Все вроде бы ок.
Выбрал font-family: monospace, чтобы ширина шрифта была одинаковая. Однако, в разных браузерах отображается по разному.
В итоге в firefox так:

А в Opera так:

Может есть какой-то более простой и рабочий способ? Спасибо.

PS: Лишь сравнив тут скриншоты понял, что проблема в подгрузке этого шрифта в Опере. Установил с ГуглФонтс другой – все ОК.
Но если есть какой-то другой рабочий вариант, то был бы благодарен. Интересно, как это можно решить.

Comments

[ⓒⓢⓢ]

Выбрал font-family: monospace, чтобы ширина шрифта была одинаковая. Однако, в разных браузерах отображается по разному.

monospace - это не шрифт и даже не семейство шрифта, это целая группа шрифтов, со своими начертаниями глифов.
В вашем случае удобно найти единый "моноширинный" шрифт и его использовать для всех браузеров.
https://developer.mozilla.org/ru/docs/Web/CSS/font...

Answer 1

[strelok011]

Чтобы решить это правильно и универсально - надо использовать js и вместо input - div content editable.
Натыкался когда-то на одном сайте на такое.
Индивидуально буквы не возможно оформить, кроме первой first-letter.
И для нормального оформления нужно заворачивать хотя бы в span.
Простое решение - ваше, методом подбора шрифта ).

Comments

[Stalker_RED]

только вот рендер шрифта зависит не только от браузера, но еще и от операционки, настроек типа cleartype, и даже видеодрайвера.
спаны рулят.

[strelok011]

Это без сомнения так

[Павел]

strelok011, спасибо за ответ!
А вы не подскажите, как сделать обертывание каждого вводимого символа в тег ?

[strelok011]

Вам нужно реализовать что-то на подобие этого:
https://stackoverflow.com/questions/12252613/how-t...
или https://itchief.ru/lessons/javascript/input-mask-f...