Изменение шрифта в поле ввода с подчеркиванием под каждым символом

Question

Я хочу создать полный текст в Django.Пробелы должны показывать, сколько букв пропущено.Например: это пример.Я буду sh_ _ то, что я me_ _.

Я нашел несколько полезных CSS-фрагмент на codepen .Я попытался поиграть с ним и использовать буквы вместо цифр и изменить шрифт на Segoe UI.У меня проблема в том, что подчеркивания больше не синхронизируются с буквами, когда я использую Segoe UI.Как мне изменить конфигурацию, чтобы она снова хорошо подходила?

Мой код SCSS:

$char-w: 1ch;
$gap: .5*$char-w;
$n-char: 7;
$in-w: $n-char*($char-w + $gap);

input {
    display: block;
    margin: 2em auto;
    border: none;
    padding: 0;
    width: $in-w;
    background: repeating-linear-gradient(90deg, 
        dimgrey 0, dimgrey $char-w, 
        transparent 0, transparent $char-w + $gap) 
        0 100%/ #{$in-w - $gap} 2px no-repeat;
    font: 5ch Segoe UI; /*That's the attribute i changed*/
    letter-spacing: $gap;

    &:focus {
        outline: none;
        color: dodgerblue;
    }
}

Мой код HTML:

<input maxlength='7' value=''/>

Answer 1

Причина, по которой это происходит, заключается в том, что используемый вами шрифт не monospaced (буквы имеют индивидуальную ширину).Если вы измените шрифт на font-family: monospace;, он будет работать.

Вот пример использования Ubuntu:

@import url("https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono");
body {
  font: 1.2rem 'Ubuntu', sans-serif;
}

input {
  display: inline-block;
  margin: 1.2rem auto;
  border: none;
  padding: 0;
  width: 10.5ch;
  background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/ 10ch 2px no-repeat;
  font: 1.2rem 'Ubuntu Mono', monospace;
  letter-spacing: 0.5ch;
}
input:focus {
  outline: none;
  color: dodgerblue;
}

Lorem ipsum <input maxlength='7' value=''/> dolor sit amet