在HTML中设置输入密码的样式 [英] Styling input password in HTML

问题描述

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

I have an input type password that only allow a six-digit number like this:

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

它将显示如下:

如何设置样式，使其看起来如下所示?

How can I style it so it can look like the following?

推荐答案

要解决此问题:

• 将::after放置在fieldset而不是input框上，或添加一个元素.
• 使用下划线设置content值，并放置元素.
• 将letter-spacing和width添加到input框，并将:focus设置为outline: none以删除蓝色框.

• Place ::after on fieldset instead of input box or add an element.
• Set content value using underscores, and position the elements.
• Add letter-spacing and width to input box, and set :focus as outline: none to delete the blue box.

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>

这篇关于在HTML中设置输入密码的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！