Форма ввода с разделением HTML и CSS - char by char - PullRequest
Новая
       18

Форма ввода с разделением HTML и CSS - char by char

0 голосов
/ 06 июля 2018

Я пытаюсь разделить поле ввода, чтобы сделать что-то вроде этого: Пример ввода

Но я застрял и не нашел ничего, что могло бы мне помочь. Я нахожу что-то похожее, но не то, что хочу: 

input[type="text"] {
  border: none;
  width: 400px;
  background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/52% 2px no-repeat;
  color: dimgrey;
  font-family: monospace;
  letter-spacing: .5ch;
}

input:focus {
  outline: none;
  color: dodgerblue;
}
<label for="name">Name:</label>
<input type="text" id="name" name="name" maxlength="20" />

Единственное требование - использовать только HTML и CSS. Я был бы очень признателен, если бы кто-нибудь мог мне помочь. Спасибо!

1 Ответ

0 голосов
/ 06 июля 2018

Я понял, что эти изменения ближе к background, letter-spacing и padding-left: 

input[type="text"] {
  border: solid 1px dimgrey;
  width: 400px;
  background: repeating-linear-gradient(90deg, #ffffff 0px, #ffffff 19px, #000000 20px);
  color: dimgrey;
  font-family: monospace;
  letter-spacing: 1.75ch;
  padding-left: 0.8ch;
}

input:focus {
  outline: none;
  color: dodgerblue;
}
<label for="name">Name:</label>
<input type="text" id="name" name="name" maxlength="20" />
...