HTML和CSS Split输入表单-char by char [英] HTML & CSS Split input form - char by char

问题描述

我尝试将输入字段拆分成这样：

I try to split input field to make something like this:

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

But I'm stuck and I didn't found anything that help me. I find something similar but isn't what I want:

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

The only requirement is to use only HTML and CSS. I would appreciate very much if someone could help me. Thanks!

推荐答案

通过对 background ，字母间距和向左填充：

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！