在HTML中设置输入密码的样式 [英] Styling input password in HTML
本文介绍了在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
onfieldset
instead ofinput
box or add an element. - Set
content
value using underscores, and position the elements. - Add
letter-spacing
andwidth
toinput
box, and set:focus
asoutline: 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屋!
查看全文