时间戳

首页 > 解决方案 > 如何使用 css 将电话输入分成不同的盒子（每个盒子一个数字）

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

问题描述

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

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

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

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

两个木偶

标签： cssuser-interfaceresponsive-designuser-experience

解决方案

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

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

推荐阅读