如何使用 css 将电话输入分成不同的盒子（每个盒子一个数字）答案

【问题标题】：How to split telephone input into different boxes (one number per box) using css如何使用 css 将电话输入分成不同的盒子（每个盒子一个数字）
【发布时间】：2019-06-18 16:53:00
【问题描述】：

我想将输入的每个数字拆分为单独的框。我想要它的视觉效果。

例如。当我们填写表格时，每个字母都在一个盒子里（每盒 1 个字母）。有没有办法在 CSS 中做到这一点。

请参考下图并查看 PAN 的输入，即成立日期。

我想用 css 实现同样的东西，这样当用户输入时，每个字母都会出现在相应的块中。

【问题讨论】：

提交号码时，您希望将其作为单个数字提交，还是作为单个较长的数字字符串提交？

标签： css user-interface responsive-design user-experience

【解决方案1】：

您可以使用背景渐变创建线条并将它们叠加在输入上。您需要使用等宽字体来保持所有内容对齐。您还需要在输入上设置maxlength。

.input-wrapper {
  position: relative;
  font-size: 2rem;
  font-family: monospace;
}

.lines {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  
  /* create lines */
  background-image: linear-gradient(
  to right, 
  black 1px, 
  transparent 1px);
  background-size: 2ch;
}

input {
  display: block;
  box-sizing: border-box;
  border-width: 0 1px 1px;
  border-color: black;
  border-style: solid;
  font: inherit;
  
  padding: .25ch .5ch;
  letter-spacing: 1ch;
  max-width: 20ch;
}


/* for demo, ignore */
body {
  margin: 0;
  display: grid;
  place-content: center;
  min-height: 100vh;
}

<div class="input-wrapper">
  <input type="tel" maxlength="9">
  <span class="lines"></span>
</div>

【讨论】：

@KarReddy 哦，maxlength 的值为 9，尝试将其更新为 10