html - 在 HTML 中样式化输入密码

Question

我有一个输入型密码，只允许像这样的六位数字:

<fieldset>
  <label for="password-input">Enter New Pin</label>
  <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
  maxlength="6" size="6" value="">
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

它将显示如下:

我如何设置它的样式，使其看起来像下面这样？

Answer 1

因为你不能在你的输入框上使用 ::after 伪元素，在 fieldset 上使用它(或者如果你可以改变 HTML，添加一个元素)。然后使用下划线为其赋予 content 值，并将元素放置在您想要的位置。最后，将 letter-spacing 和 width 添加到您的 input 框，并给它一个 :focus 的 outline: none 去掉蓝框。

fieldset {
  color: #555;
  font-family: sans-serif;
  border: none;
  position: relative;
}

fieldset > * {
  display: block;
}

fieldset::after {
  content: "___  ___  ___  ___  ___  ___";
  display: block;
  position: absolute;
  top: 35px;
  white-space: pre;
}

label {
  font-size: 14px;
  margin-bottom: 6px;
}

input#password-input {
  position: relative;
  font-size: 16px;
  z-index: 2;
  border: none;
  background: transparent;
  width: 300px;
  text-indent: 9px;
  letter-spacing: 25.6px;
  font-family: Courier;
}

input#password-input:focus {
  outline: none;
}

span.hint {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
}

span.hint::before {
  content: "* ";
}

<fieldset>
  <label for="password-input">Enter New Pin</label>
  <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>