带有插槽的Html输入类型文本，用于在css中表示的每个字符

Question

是否可以在不使用每个正方形的边框（纯黑）和使用字体粗细和字体大小的情况下实现此结果？

Answer 1

您必须使用等宽字体。

＆＃13;

＆＃13;

input {
  border: 1px solid black;
  font-family: courier;
  letter-spacing: .9em;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) calc(1.5em - 2px), black 1.5em);
  background-size: 1.5em 100%;
  padding-left: .4em;
  width: calc(20*1.5em - .6em);
}

＆＃13;

<label>Name: <input type="text" value="Lorem ipsum"></label>

＆＃13;

＆＃13;

＆＃13;