Хотите повторить мой текстовый фон исправлен

Question

Это мой стиль текстового поля для моего 6 Di git OTP

В настоящее время, когда я пишу свой OTP после ввода 6-го числа позже, его go занимает 7-е место. 7-й также подчеркнут. Могу ли я установить ограничение только с 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" >