我有一个输入类型的密码,只允许这样的六位数:
<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>
原文地址:https://www.jb51.cc/html/228634.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。