想要重复我的文本框背景固定

Question

这是我的 6 位 OTP 的文本框样式

目前，当我在输入第 6 位后写下我的 OTP 时，它会转到第 7 位。 7th 也有下划线。我只能限制 6 个吗？

#txtOTP {
        padding-left: 15px;
        letter-spacing: 42px;
        border: 0;
        background-image: linear-gradient(to left, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: bottom;
        background-size: 55px 1px;
        background-repeat: repeat-x;
        background-position-x: 35px;
        width: 220px;
    }
<input id="txtOTP" style="border:none;" type="text" maxlength="6"  size="6" />

注意：大小也适用于所有浏览器...如果您要为所有浏览器的灵活性开发网站，不建议使用它。

修复重复需要什么更改？

Answer 1

见下文css

    #txtOTP {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
    }

<input type="text" id="txtOTP" maxlength="6"  pattern="\d{6}" value="123456" >

想要重复我的文本框背景固定

Want to repeat my textbox background fixed

css

styles

stylesheet