想要重复我的文本框背景修复

Question

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

目前，当我在输入第 6 个后写下我的 OTP 时，它会转到第 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" >