Можно использовать letter-spacing
и фон из кругов (inline-svg
для демонстрации). При таком подходе нужно использовать моноширинный(!) шрифт. Было бы ещё хорошо ограничить количество вводимых символов через js
.
*{
box-sizing:border-box;
}
.pass{
font-family:monospace;
font-size:18px;
letter-spacing:35px;
padding:4px 10px;
letter-spacing:35px;
border:none;
outline:none;
position:relative;
background:none;
width:170px;
clip-path:polygon(0 0, 120px 0, 120px 100%,0 100%);
}
.background{
position:absolute;
width:120px;
height:30px;
}
<svg class="background" viewBox="-0.5 -0.5 121 31" preserveAspectRatio="none">
<g fill="none" stroke="gray">
<circle cx="15" cy="15" r="15" />
<circle cx="60" cy="15" r="15" />
<circle cx="105" cy="15" r="15" />
</g>
</svg>
<input type="text" class="pass" maxlength="3" value="123"/>
border-radius: 50%
, выравнивание текста по центру и в конце, при отправке на сервер, чтобы не отправлять 4 значения из этих инпутов, просто соеденить их в один 4-х значный код.