在 HTML 中设置输入密码的样式答案

【问题标题】：Styling input password in HTML在 HTML 中设置输入密码的样式
【发布时间】：2019-03-23 23:07:27
【问题描述】：

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

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

它会显示如下：

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

【问题讨论】：

我们无法更改输入类型password 中的密码屏蔽字符。我们可以对输入类型text 这样做，但它存在安全风险。
以下所有答案至少对一个人都失败的事实应该告诉您不要尝试这样做。
类似问题：stackoverflow.com/questions/49476209/…
我会采取不同的方式。使用带有背景图像和 JavaScript/jQuery 的单行 6 单元格表来处理/屏蔽/显示。与尝试设置密码输入样式相比，它会给您更多的视觉灵活性。这可能需要更多的工作，但您可以让一切正常工作并完全按照您想要的方式进行。
@SunKnight0 对于拥有密码管理器的人来说，也需要从剪贴板进行粘贴。

标签： html css input

【解决方案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>

【讨论】：

@Ferrybig 我为输入设置了字体系列。更好？
@symlink 光标不适合最后一个输入
@blue 这是意料之中的；真的没有什么可以做的。
Firefox 上的宽度错误 - 5 个字符均匀分布在 6 个下划线上
更接近，但仍然关闭 - 到第 5 个点时，它转移到第 5 个和第 6 个下划线之间

【解决方案2】：

试试这个：

input {
  padding-left: 15px;
  letter-spacing: 39px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 3px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 280px;
  font-size: 30px;
}

input:focus {
  outline: none;
}

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

【讨论】：

输入字体太小，输入时出现蓝色边框，输入最后一个字符时输入对齐变乱
这实际上是唯一一个在 Ubuntu 上 Chromium 上的字母间距正确的答案，但是太糟糕了在第六个字符之后有一个错误
@Ferrybig 是的，修复该错误将很快更新代码:)
@Ferrybig 我希望你不要指望每个人都能为 Ubuntu 测试字体，因为它不像 Windows PC 甚至 OSX Mac 那样普遍。我的答案中的字体是 Consolas，您的机器无法识别它。将字体系列更改为您的机器可以识别的字体。
Ubuntu 相当普遍，根据 w3schools 的数据，超过 5% 的访问者使用它：w3schools.com/browsers/browsers_os.asp，而且考虑到大多数人有一段时间他们会避开该网站

【解决方案3】：

您可以在输入后面放置一个包含“掩码”的元素，并将输入的背景颜色设置为透明。但要注意以下细节：

使用等宽字体系列，使_ 和• 的宽度始终相同。
以monospace 结束您的字体列表，以便操作系统在所有指定字体都不可用时选择固定宽度的字体。
用户代理可以为输入元素选择不同的字体系列、大小和行高。它还可以为等宽字体选择不同的大小和行高（例如，medium 的大小可以计算为 13 像素而不是通常的 16 像素，normal 的行高对于两种具有相同大小的不同字体通常相差 1 像素）。因此，请务必明确指定这些属性。

结果如下：

body {
  font-family: sans-serif;
}

fieldset label,
fieldset span {
  display: block;
  margin: .5em 0;
}

fieldset .input-wrapper {
  /* positioning */
  position: relative;
  /* font */
  font: 16px/1.5 monospace;
  letter-spacing: .5em;
  /* optional */
  background-color: #EEE;
}

fieldset .input-wrapper::before {
  /* positioning */
  position: absolute;
  /* masking */
  content: "______";
}

fieldset input {
  /* positioning */
  position: relative;
  /* font */
  font: inherit;
  letter-spacing: inherit;
  /* masking */
  background-color: transparent;
  /* reset */
  margin: 0;
  border: 0;
  padding: 0;
}

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

【讨论】：

与获得更多好评的答案不同，这个答案在 Firefox 中的间距正确。有点让我怀疑它在 Chrome 中是否看起来很时髦......
@Izkata 我只检查了 Chrome :)

【解决方案4】：

#更新

添加了<input type='number'>，可以将根font-size: 8px调整为84px。

#相关点

输入被去除边框、轮廓和背景。
在输入周围包裹一个标签作为覆盖（技术上它是一个底层？z-index: -1），它有一个伪类 ::after，content 值为 6 个下划线。

输入和覆盖都必须具有以下属性：

  /* The values can anything as long as it is valid and are the same */
  letter-spacing: 10px;
  font-size: 1.2rem;
  font-weight: 900;

叠加层为display: table，输入为display: table-cell。这（连同absolute 和relative 定位）使输入保持在叠加层的中心位置。
使用rem 单位，因此如果您想向上或向下缩放font-size，只需更改<html> 标签的font-size，一切都会相应调整：
```
  /* Change the 16px to whatever you want and everything scale to that value */
  html, 
  body {
    font: 400 16px/1.5 Consolas
  }
```

##演示 注意：尝试按住一个键，你会发现没有移位。

var node = document.querySelector('#fSz');
node.oninput = setFontSize;

function setFontSize(e) {
  var tgt = e.target;
  var root = document.documentElement;
  root.style.setProperty(`--${tgt.id}`, `${tgt.valueAsNumber}px`);
}

:root {
  --fSz: 16px;
}

html,
body {
  font-size: var(--fSz);
  font-weight: 400;
  line-height: 1.5;
  font-family: Consolas, 'sans serif', monospace;
}

fieldset {
  position: relative;
  display: table;
  min-height: 5.5rem;
  padding: 0 0 0 0.3125rem;
  margin-top: 2em;
  overflow: visible;
}

fieldset * {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

legend {
  font-size: 1.2rem;
}

.overlay {
  display: table;
  position: relative;
  top: 0.3125rem;
  left: 0.9375rem;
  font-size: 1.2rem;
  font-weight: 900;
}

.overlay::after {
  content: '\ff3f\ff3f\ff3f\ff3f\ff3f\ff3f';
  font-size: 1.2rem;
  letter-spacing: 0.78rem;
}

@-moz-document url-prefix() {
  .overlay::after {
    content: '\2501\2501\2501\2501\2501\2501';
    text-shadow: 0.65rem 0px 0px #222;
    font-size: 1.37rem;
    letter-spacing: 1.2rem;
    line-height: 2;
  }
}

.hint {
  display: block;
  position: absolute;
  bottom: -2rem;
  left: 0.625rem;
  font-style: italic;
  font-size: 0.75rem;
}

#password-input {
  display: table-cell;
  border: 0px none transparent;
  outline: 0px none transparent;
  background: transparent;
  position: absolute;
  left: 0px;
  z-index: 1;
  overflow: hidden;
  line-height: 2;
  transform: translate(0.25rem, -1rem);
  letter-spacing: 1.25rem;
  font-size: 1.35rem;
  font-weight: 900;
}

sup {
  padding-top: 0.25rem;
  font-size: 0.65rem
}

.fc {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  font: 400 16px/1.5 Consolas;
  width: 50%;
}

#fSz {
  display: inline-block;
  padding-left: 8px;
  width: 52px;
  font: inherit;
  text-align: center;
}

<label for='fSz' class='fc'>Font-Size: 
  <input id='fSz' type='number' min='8' max='84' value='16' step='0.5'>&nbsp;px
  </label>

<fieldset>
  <legend>Enter New Pin</legend>
  <label for='chk' class='overlay'>
     <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="19" value="123456" placeholder='123456'>
     </label>
  <label for="password-input" class="hint"><sup>&#128956;</sup>New pin must be 6 digit number only</label>

</fieldset>

【讨论】：

感谢 O 先生，我以前从未想过在答案中使用格式化 cmets。
您的字母间距在 Ubuntu 操作系统上的 Chromium 上太小：i.imgur.com/MT5dYpU.png
在 .overlay 和 <input> 上更改 letter-spacing 并确保它们具有相同的值。
其实看了截图后，我相信是因为Ubuntu OS不识别Consolas font-family。尝试使用与 Consolas 相当的等宽字体。
在 Firefox 62、Windows 10 上看起来很难看：i.stack.imgur.com/UeEHr.png

【解决方案5】：

这种传统的解决方案可能有助于跨浏览器：

HTML 表单：

<p class="text-center">Enter new pins</p>
     <form role="form" method="post">
        <div class="form-group text-center">

                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >

                <small class="text-danger">New pin must be 6 digit number only</small>      
            </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg btn-block">Verify Pin
            </button>
        </div>
        <input id="code_hidden" maxlength="6" name="real_code" type="text" >
    </form>

我们可以在 input name = real_code 上看到结果。在生产中它必须是 type = 'hidden'。当需要更多字段时更改此最大长度。

样式 CSS：

<style>
.inputbox {
    background-color: #fff;
    border: none;
    border-bottom: thin solid gray;
    width: 20px;
    font-size: 24px;
    margin-bottom: 20px;
    margin-right: 5px;
}
</style>

脚本部分：

<script>
    $(function() {

    $(".inputbox").keyup(function () { 

        $(this).next('.inputbox').focus();

        var value = [];

        $('.inputbox').each(function() {
          value += $(this).val();  
        }); 

         $('#code_hidden').val(value); 
        });
    });

    </script>

【讨论】：