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