How to select each input in the input symbol?

Hello!
It is possible to implement such an input, like the screenshot below?
5dfb881c3e8f4488015087.png
Thought through background input'a. Drew the dotted line and choose repeat-x. Everything seems to be approx.
Chose font-family: monospace to the font width was the same. However, different browsers displayed in different ways.
As a result, in firefox like this:
5dfb898921c41509076146.png
And in Opera like this:
5dfb89a150dfd948893078.png
Maybe there's some more simple and working way? Thank you.

PS: Only then comparing screenshots I realized that the problem is in the uploading of this font in Opera. Mounted with Supports the other – everything is OK.
But if there's another working version, I would be grateful. I wonder how it can be solved.
April 3rd 20 at 18:43
1 answer
April 3rd 20 at 18:45
Solution
To solve it correctly and versatile - you should use js instead of the input - content div is editable.
Ran once on one website that.
Individually the letters are not possible to make out, but the first first-letter.
And for normal registration you need to wrap at least span.
A simple solution is yours, the method of selection of the font ).
but the rendering of the font depends not only on browser but also on OSes, settings, type cleartype, and even the video driver.
spany rule. - coty.Towne81 commented on April 3rd 20 at 18:48
This is without a doubt so - delphia_Web commented on April 3rd 20 at 18:51
@Dovie_Runolfsdottir, thanks for the reply!
Can you tell me how to make wrap each letter in a tag ? - Isabelle_Ruecker commented on April 3rd 20 at 18:54
You need to implement something like this:
https://stackoverflow.com/questions/12252613/how-t...
or https://itchief.ru/lessons/javascript/input-mask-f... - delphia_Web commented on April 3rd 20 at 18:57

Find more questions by tags CSSJavaScriptHTML