以HTML格式输入样式
我有一个输入类型的密码,只允许这样的六位数:
<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>
它将显示如下:
我该如何设计它,使它看起来如下？
sym*_*ink 20
解决问题:
- 广场
::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: "* ";
}<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>Vik*_*hav 11
试试这个:
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;
}<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>- 输入字体太小,当我进入输入时,周围有一个蓝色边框,当我输入最后一个字符时,输入对齐变得杂乱 (6认同)
- 这实际上是Ubuntu上Chromium上字母间距正确的唯一答案,但是第六个字符后面有一个bug太糟糕了 (2认同)
- 根据w3schools的说法,Ubuntu非常普遍,超过5%的访问者使用它:https://www.w3schools.com/browsers/browsers_os.asp并且考虑到大多数人都有时间避开该网站 (2认同)
更新
- 添加了一个
<input type='number'>可以调整根font-size: 8px的84px.
相关要点
- 输入被剥去边框,轮廓和背景.
- 缠输入的标签作为覆盖(在技术上它是一种底层？
z-index: -1),其具有伪类::after与content6个下划线值. 输入和叠加都必须具有以下属性:
Run Code Online (Sandbox Code Playgroud)/* 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了的<html>标签,一切都相应调整:
Run Code Online (Sandbox Code Playgroud)/* 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;
}<label for='fSz' class='fc'>Font-Size:
<input id='fSz' type='number' min='8' max='84' value='16' step='0.5'> px
</label>
<fieldset>
<legend>Enter New Pin</legend>
<label for='chk' class='overlay'>
<input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="19" value="123456" placeholder='123456'>
</label>
<label for="password-input" class="hint"><sup>🞼</sup>New pin must be 6 digit number only</label>
</fieldset>您可以在输入后面放置一个包含"蒙版"的元素,并将输入的背景颜色设置为透明.但要注意以下细节:
- 使用等宽字体系列,以便宽度
_和•始终相同. - 结束字体列表,
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;
}<fieldset>
<label for="password-input">Enter New Pin</label>
<div class="input-wrapper">
<input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" value="">
</div>
<span class="hint">New pin must be 6 digit number only</span>
</fieldset>