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

【问题标题】：Want to repeat my textbox background fixed想重复我的文本框背景固定
【发布时间】：2020-05-04 02:57:28
【问题描述】：

这是我的 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" />

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

修复重复需要什么更改？

【问题讨论】：

请说明您需要什么？
不明白你到底想要什么。你说的修复重复是什么意思，有什么问题？
不，根据 css，它会重复我的破折号 x 次。我只想重复 6 次。
使用 maxlength 和 size 它将排在第 7 位，第 7 位也有下划线。我不想要它。

标签： css styles stylesheet

【解决方案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;
    }

&lt;input type="text" id="txtOTP" maxlength="6"  pattern="\d{6}" value="123456" &gt;

【讨论】：