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

Question

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

#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;
    }

修复程序需要进行哪些更改？

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" >