单输入框式带中间分隔线矩形OTP输入组件实现问询

需求：实现仅使用单个input的OTP输入框，每个输入字符位于带中间分隔线的矩形框内，尽可能减少JavaScript代码，拒绝多输入框方案。以下是优化后的CSS与HTML代码：

优化后CSS代码 #

:root {
    --otp-digits: 6;
    --otp-digit-width: 4ch; /* 单个数字框宽度 */
    --otp-border-color: #B2B2B2;
    --otp-border-width: 3px;
}

[autocomplete="one-time-code"] {
    all: unset;
    box-sizing: border-box;
    /* SVG背景：带右侧分隔线的白色矩形框 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='white' stroke='%23B2B2B2' stroke-width='3' /%3E%3Cline x1='100' y1='0' x2='100' y2='60' stroke='%23B2B2B2' stroke-width='3' /%3E%3C/svg%3E");
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: var(--otp-digit-width) 100%;
    /* 总宽度：6个框宽减去最后一个分隔线宽度 */
    width: calc(var(--otp-digits) * var(--otp-digit-width) - var(--otp-border-width));
    padding: 20px 0;
    text-align: center;
    /* 字符间距：让每个数字刚好落在对应框中心 */
    letter-spacing: calc(var(--otp-digit-width) - 1ch);
    font-size: 2.5em;
    caret-color: #000; /* 恢复光标可见性 */
}

/* 可选：聚焦时的高亮样式 */
[autocomplete="one-time-code"]:focus {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

优化后HTML代码 #

<input type="text" 
    autocomplete="one-time-code" 
    inputmode="numeric" 
    maxlength="6" 
    pattern="\d{6}"
    onkeyup="if(this.value.length === 6) this.blur()"
/>

关键优化说明 #

• 背景SVG新增右侧竖线，通过repeat-x实现连续的带分隔线框体，最后一个分隔线通过总宽度计算隐藏
• 使用CSS变量统一配置位数、框体尺寸、边框样式，后续修改更便捷
• 精准计算letter-spacing，确保每个输入字符对齐到对应框的中心位置
• 补充box-sizing、光标颜色、聚焦样式，修复基础交互体验问题
• 保留原有HTML的语义化属性，支持移动端数字键盘、浏览器OTP自动填充

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