css实现4位数字输入框

在前端开发中，经常需要实现数字输入框，比如银行卡号、验证码等，本文将介绍如何使用 CSS 实现一个 4 位数字输入框。

HTML 代码：div class="input-box">
      input type="text" maxlength="1" class="input" />
      input type="text" maxlength="1" class="input" />
      input type="text" maxlength="1" class="input" />
      input type="text" maxlength="1" class="input" />
    /div>
CSS 代码：.input-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
}
.input {
      width: 40px;
      height: 40px;
      font-size: 24px;
      text-align: center;
      border: none;
      background-color: transparent;
      outline: none;
      caret-color: #333;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}
.input:focus {
      border: 1px solid #0099ff;
      box-shadow: 0 0 6px #0099ff;
}
    

首先，使用 flex 布局设置输入框容器的样式。内部使用 4 个 input 元素，通过设置 maxlength 属性为 1 来限制输入字符数。

对于 input 的外观，先将边框、背景、外部描边等样式清除，再设置宽度、高度、字体大小及居中等样式。

当 input 获取焦点时，设置边框及阴影样式，当然，这些样式可以根据项目需要自行调整。

这样，我们就可以实现一个简单的 4 位数字输入框了。当然，如果需要优化用户体验，可以加入自动聚焦、自动跳转等功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！