Question

我尝试将输入字段拆分为以下内容： Input example

但是我被困住了，没有发现任何对我有帮助的东西。我发现类似的东西，但不是我想要的：

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

Answer 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" />

HTML＆CSS Split输入表单-char by char

1 个答案: