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

Question

我想将输入的每个数字拆分到单独的框中。我想要它的外观。

例如。当我们填写表格时，每个字母都在一个盒子里（每个盒子 1 个字母）。在 CSS.

中有没有办法做到这一点

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

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

Answer 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>

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

How to split telephone input into different boxes (one number per box) using css

css

user-interface

user-experience

responsive-design