我有一个输入类型的密码,只允许这样的六位数：
<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>
它将显示如下：
我该如何设计它,使它看起来如下？
解决方法
解决问题：
>在场集上放置:: after而不是输入框或添加元素.
>使用下划线设置内容值,并定位元素.
>在输入框中添加字母间距和宽度,并设置：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>
