HTML & CSS Split input form - char by char答案

【问题标题】：HTML & CSS Split input form - char by charHTML & CSS Split input form - char by char
【发布时间】：2018-07-06 00:39:08
【问题描述】：

我尝试拆分输入字段以制作如下内容：

但我被困住了，我没有找到任何可以帮助我的东西。我找到了类似的东西，但不是我想要的：

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。如果有人可以帮助我，我将不胜感激。谢谢！

【问题讨论】：

stackoverflow.com/a/38747017/1675954
感谢@RachelGallen，但我想要一个只包含 HTML 和 CSS 的代码。我在下面找到了答案。

标签： html css input split

【解决方案1】：

通过对 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" />

【讨论】：

非常感谢！