Search code examples
cssstylesstylesheet

Want to repeat my textbox background fixed

This is my textbox style for my 6 Digit OTP

Currently when i write my OTP on after typing 6th later its go to 7th position. 7th is also underlined. Am i able to make limit with 6 only?

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

Note: Size is also working with all browser... not recommended to use it if you are going to develop website for all browser flexibility.

what change needed for fix repeat?

Solution

  • See below 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" >