作者：从妖妖 | 来源：互联网 | 2022-12-01 20:19
我有一个输入类型的密码,只允许这样的六位数:
Enter New Pin
New pin must be 6 digit number only
它将显示如下:
我该如何设计它,使它看起来如下？
1> symlink..： 解决问题:
广场::after上fieldset,而不是input框或添加元素.
content使用下划线设置 值,并定位元素.
添加letter-spacing和width对 input箱,并设置: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: "* ";
}
Enter New Pin
New pin must be 6 digit number only
2> Vikas Jadhav..： 试试这个:
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;
}
Enter New Pin
New pin must be 6 digit number only
3> zer00ne..： 更新
添加了一个font-size: 8px的84px.
相关要点
输入被剥去边框,轮廓和背景.
缠输入的标签作为覆盖(在技术上它是一种底层？z-index: -1),其具有伪类::after与content6个下划线值.
输入和叠加都必须具有以下属性:
/* 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向上或向下,只是改变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;
}Font-Size:
Enter New Pin
&＃128956; New pin must be 6 digit number only 4> Salman A..： 您可以在输入后面放置一个包含"蒙版"的元素,并将输入的背景颜色设置为透明.但要注意以下细节:
使用等宽字体系列,以便宽度_和•始终相同.
结束字体列表,monospace以便操作系统可以选择固定宽度字体,如果所有指定的字体都不可用.
用户代理可以为输入元素选择不同的字体系列,大小和行高.它还可以为等宽字体选择不同的尺寸和线高(例如,medium尺寸可以计算为13px而不是通常的16px,并且normal对于具有相同尺寸的两种不同字体,线高度通常偏差1px).因此,请确保明确指定这些属性.
结果如下:
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;
}
Enter New Pin
New pin must be 6 digit number only
京公网安备 11010802041100号