用CSS实现单字符输入槽的HTML input type text：能否无需黑边框span及调整font-weight/font-size？

当然可以！完全不用额外的span元素，也不用调整字体粗细和大小，咱们靠纯CSS就能搞定每个字符对应独立输入槽的需求～

核心思路 #

利用CSS背景渐变（linear-gradient）创建重复的分隔线/槽结构，配合文本间距控制，让输入的每个字符刚好对应一个独立的槽，全程不需要额外的HTML元素，也不会改动字体属性。

实现代码 #

HTML结构

就一个普通的文本输入框，通过maxlength控制允许输入的字符数量（对应槽的个数）：

<input type="text" maxlength="6" class="char-slot-input" placeholder="输入6位字符">

CSS样式

.char-slot-input {
  /* 去掉默认边框，避免和自定义槽冲突 */
  border: none;
  /* 输入框高度适配字体，不用改font-size */
  height: 1.5em;
  /* 宽度=单个槽宽度 × 槽的数量（这里是6个槽，每个2em） */
  width: calc(2em * 6);
  /* 核心：用渐变绘制槽的分隔线，模拟独立输入框效果 */
  background-image: linear-gradient(to bottom, transparent 30%, #000 30%, #000 70%, transparent 70%);
  /* 每个槽的宽度2em，高度占满输入框 */
  background-size: 2em 100%;
  /* 横向重复渐变，生成多个槽 */
  background-repeat: repeat-x;
  /* 调整字符间距，让每个字符刚好落在槽的中间 */
  letter-spacing: 1.2em;
  /* 文本居中，让字符在槽内更整齐 */
  text-align: center;
  /* 去掉默认聚焦轮廓，或者自定义轮廓避免干扰 */
  outline: none;
  /* 微调内边距，让第一个字符位置更准确 */
  padding-left: 0.4em;
}

效果优化（可选） #

如果想要更明显的“槽”样式（比如每个槽带上下边框），可以修改背景渐变，添加上下边框的效果：

.char-slot-input {
  /* 其他样式不变，修改background相关属性 */
  background-image: 
    linear-gradient(to bottom, #000 0%, #000 100%), /* 槽的上边框 */
    linear-gradient(to bottom, #000 0%, #000 100%), /* 槽的下边框 */
    linear-gradient(to bottom, transparent 30%, #000 30%, #000 70%, transparent 70%); /* 槽之间的分隔线 */
  background-size: 2em 1px, 2em 1px, 2em 100%;
  background-position: top left, bottom left, top left;
  background-repeat: repeat-x;
}

关键细节说明 #

• 全程没有修改font-weight和font-size，完全保留原字体的样式。
• letter-spacing的数值需要根据单个槽的宽度微调，确保字符不会重叠或错位（比如槽宽2em时，1.2em左右的间距比较合适）。
• maxlength和width的计算要对应，保证输入的字符数和槽的数量一致。

内容的提问来源于stack exchange，提问作者Bogdan