如何让单个输入框呈现为OTP验证码样式？

可以通过CSS字符间距控制+背景渐变分隔线的方式，实现单个输入框呈现6位带间距的OTP效果，具体实现如下：

HTML结构 #

<input type="text" class="otp-input" maxlength="6" placeholder="------">

CSS样式 #

.otp-input {
  width: 240px;
  height: 48px;
  font-size: 24px;
  /* 字符间距：根据格子宽度调整，确保每个字符落在单独格子内 */
  letter-spacing: 32px;
  text-align: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  outline: none;
  /* 左侧内边距修正第一个字符的位置，避免和边框重叠 */
  padding-left: 16px;
  /* 用线性渐变绘制竖线分隔每个OTP位 */
  background-image: linear-gradient(to right, #e5e7eb 1px, transparent 1px);
  /* 背景尺寸：总宽度/6 = 单个格子宽度 */
  background-size: 40px 100%;
  background-repeat: repeat-x;
}

.otp-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

可选的JS优化（限制数字输入） #

如果只需要接收数字验证码，可以加一段JS过滤非数字输入：

const otpInput = document.querySelector('.otp-input');
otpInput.addEventListener('input', () => {
  otpInput.value = otpInput.value.replace(/[^0-9]/g, '');
});

关键细节说明 #

• letter-spacing：设置足够大的间距，让每个字符独立分隔开，数值需要根据输入框总宽度和字体大小调整
• 背景渐变：通过background-size控制每个分隔格子的宽度，实现类似独立输入框的视觉效果
• padding-left：修正第一个字符的偏移，确保字符和背景格子对齐

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