我已经实现了一个用于 OTP 验证的 HTML 输入字段,它在 chrome 中运行得非常好,但是当我在 SAFARI 中打开它时,它在右侧显示了一个额外的输入。
这是运行代码:JSBIN
HTML代码:
<div id="otp-holder">
<div id="otp-content">
<input id="otp-input" type="tel" maxlength="6" pattern="\d{6}" autocomplete="off"/>
</div>
</div>
CSS代码
#otp-input {
padding: 0px;
padding-left: 4px;
letter-spacing: 24px;
border: 0;
background-image: linear-gradient(to left, #167ffc 70%, rgba(255, 255, 255, 0) 0%);
background-position: bottom;
background-size: 33px 1px;
background-repeat: repeat-x;
background-position-x: 19px;
width: 220px;
min-width: 220px;
margin-bottom: 0px;
}
#otp-content {
left: 0;
position: sticky;
}
#otp-holder {
width: 190px;
overflow: hidden
}
在这里你可以看到我从输入 1,2...6 开始,最后有 1 个额外的下划线,当我输入最后一个时第一个输入隐藏。
最佳答案
对您的代码进行了一些小的更新,它工作正常,请查看下面的工作代码段。
#otp-holder {
width: 190px;
overflow: hidden
}
#otp-content {
left: 0;
position: sticky;
}
#otp-input {
padding: 0px;
letter-spacing: 27px;
border: 0;
background-image: linear-gradient(to left, #167ffc 70%, rgba(255, 255, 255, 0) 0%);
background-position: bottom;
background-size: 33px 1px;
background-repeat: repeat-x;
background-position-x: 19px;
width: 100%; /* set width matching container width */
margin-bottom: 0px;
}
<div id="otp-holder">
<div id="otp-content">
<input id="otp-input" type="tel" maxlength="6" pattern="\d{6}" autocomplete="off"/>
</div>
</div>
关于html - SAFARI : OTP input field 中的 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52702236/