在 HTML 中样式输入密码
[英]Styling input password in HTML
问题描述
我有一个输入型密码，它只允许像这样的六位数字：
<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>
它会显示如下：
我怎样才能设计它，使它看起来像下面这样？
5 个解决方案
解决方案1
23 2018-10-19 05:04:53
由于您不能在输入框上使用::after伪元素，请在fieldset上使用它（或者如果您可以更改 HTML，则添加一个元素）。 然后使用下划线给它一个content值，并将元素放置在你想要的位置。 最后，将letter-spacing和width添加到您的input框，并给它一个:focus of 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>
解决方案2
13 2018-10-19 04:39:17
尝试这个：
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>
解决方案3
7 2018-10-19 05:21:21
更新
- 添加了一个
<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: 0; 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'> 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>🞼</sup>New pin must be 6 digit number only</label> </fieldset>
解决方案4
7 2018-10-19 10:52:28
您可以在输入后面放置一个包含“遮罩”的元素，并将输入的背景颜色设置为透明。 但要注意以下细节：
- 使用等宽字体系列，以便
_和•的宽度始终相同。 - 以
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>
解决方案5
0 2019-04-25 11:31:42
这种传统的解决方案可能有助于跨浏览器：
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'。 当需要更多字段时更改此 maxlength。
样式 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>
解决方案6
-5 2018-10-19 16:06:06
<fieldset>
<label for="password-input">
Enter New Pin</label>
<input type="password" name="password" id="passwordinput" inputmode="numeric" minlength="6" maxlength="6" size="6" value=""placeholder="input password">
<span class="hint">
New pin must be 6 digit number. only</span>
</fieldset>
input[type=password]{
border:1px;
border-bottom-style:dashed;
border-top-color:white;
border-left-color:white;
border-right-color:white;
}
<input type =“password”...>使用jQuery进行样式设计
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.