html - 制作自定义输入文本类型

Question

我想做这个

但我不知道如何制作正方形以及如何设置在一个正方形中只能输入一个字母。到目前为止我写了这个，但我真的不知道如何继续。

.input {
  width: 200px;
  border: 1px solid black;
}

<label><b>CNP</b></label>
<input class="input" type="text" name="CNP">

Answer 1

更新:感谢@Danield 的评论，我更新了更合适的单位。

你可以使用线性渐变，但如果你想在一个槽中有一个字母，你需要注意不同的大小和字体系列:

.input {
  /* each letter will take 1ch + 1px and we remove 1px of the last one*/
  width: calc(15 * (1ch + 1px) - 1px);
  border: 1px solid black;
  background: 
  /* 1ch space for the letter + 1px border */
  repeating-linear-gradient(to right, #fff, #fff 1ch, #000 1ch, #000 calc(1ch + 1px));
  font-size: 29px;
  /*since a letter will take 1ch we add 1px to cover the border*/
  letter-spacing: 1px; 
  /*we use a monospace font-family so all the letter will take the same width = 1ch*/
  font-family: monospace;
}

<input class="input" type="text" maxlength="15" name="CNP">
<p>This will work with any font-size</p>
<input class="input" type="text" maxlength="15" name="CNP" style="font-size:35px;">