有关HTML和CSS拆分输入表单的问题?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (70)

我尝试将输入字段拆分为以下内容: 示例(https://i.stack.imgur.com/Dhadm.png)

以下不是我想要的实现效果:

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。谢谢!

提问于
用户回答回答于

这些变化更接近于backgroundletter-spacingpadding-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" />

扫码关注云+社区

领取腾讯云代金券