为css中的每个字符创建带有正方形的输入表单

Question

我的网络编程任务需要一些帮助;我必须使用ONLY html和css创建一个如下所示的表单输入（所以没有js）。

不，我不允许为每个方块使用输入字段

Answer 1

一种可能的解决方案是使用重复的背景图像，垂直线或下面的示例，SVG：

input {
  width: 198px;
  font-family: monospace;
  letter-spacing: 8px;
  border: 1px solid #000;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><line style="stroke: #000" x1="20.090665817260742" y1="-0.08398216962814331" x2="20.090665817260742" y2="20.07965660095215"/></svg>');
  background-repeat: repeat-x;
}

注意：我怀疑你的老师会认为这是“作弊”，特别是因为你自己没有写过任何实际的CSS。但是，这是我可能用于此的一种可能的现实解决方案。

https://jsfiddle.net/38a4ffh8/54/