以HTML格式输入样式

概述我有一个输入类型的密码,只允许这样的六位数： <fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" siz 我有一个输入类型的密码,只允许这样的六位数：

<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 >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 >New pin must be 6 digit number only</span></fIEldset>

总结

以上是内存溢出为你收集整理的以HTML格式输入样式全部内容，希望文章能够帮你解决以HTML格式输入样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。