Подчеркивание каждого символа вводимого текста внутри input

#javascript #html #css #вёрстка

Я пытался сделать ввод текста с подчеркиванием каждого символа в input, который выглядит
следующим образом:    

   

Проблема в том, что я не могу реализовать это подчеркивание.  

Есть ли какое-нибудь элегантное решение (или не совсем уж плохое)?  

Я уже думал об установлении абсолютных позиций и приведении их в соответствие с каждым
символом, но я не уверен, что это лучшее решение.  
    

Ответы

Ответ 1

Вы можете рассмотреть использование background, но значение будет тесно связано со
свойствами шрифта.   

Я применил моноширинный шрифт, который логически даст нам ожидаемый результат, поскольку
все символы будут иметь одинаковый размер:  



input {
   padding:10px 5px;
   border:1px solid;
   font-family:monospace;
   width: calc(8*(1ch + 5px));
   font-size:20px;
   letter-spacing:5px;
   background:
    repeating-linear-gradient(to right,blue 0 1ch,transparent 1ch calc(1ch + 5px))
    bottom/100% 2px content-box no-repeat;
}