html - SAFARI : OTP input field 中的 CSS 问题

Question

我已经实现了一个用于 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
}

请看jsbin在SAFARI中打开时的截图

在这里你可以看到我从输入 1,2...6 开始，最后有 1 个额外的下划线，当我输入最后一个时第一个输入隐藏。

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