son - title html
Estilo de entrada en HTML (5)
Tengo una contraseña de tipo de entrada que solo permite un número de seis dígitos como este:
<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>
Se mostrará así:
¿Cómo puedo personalizarlo para que se vea como el siguiente?
Actualizar
- Se agregó un
<input type=''number''>que puede ajustar elfont-size: 8pxraízfont-size: 8pxa84px.
Puntos relevantes
- La entrada está despojada de borde, contorno y fondo.
- Envolvió una etiqueta alrededor de la entrada como una superposición (técnicamente es una capa subyacente?
z-index: -1) que tiene una pseudo-clase::aftercon el valor decontentde 6 guiones bajos. Tanto la entrada como la superposición deben tener las siguientes propiedades:
/* The values can anything as long as it is valid and are the same */ letter-spacing: 10px; font-size: 1.2rem; font-weight: 900;La superposición es
display: tabley la entrada esdisplay: table-cell. Esto (junto conabsoluteposicionamientoabsoluteyrelative) mantiene la entrada rígidamente centrada en la superposición.remunidadesremse utilizan, por lo que si desea aumentar o reducir elfont-sizede lafont-size, solo cambie elfont-sizede lafont-sizede la etiqueta<html>y todo se ajustará en consecuencia:/* Change the 16px to whatever you want and everything scale to that value */ html, body { font: 400 16px/1.5 Consolas }
Manifestación
Nota: intente mantener una tecla presionada continuamente, y verá que no hay cambios.
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>
Para resolver el problema:
- Coloque
::afteren elfieldsetlugar del cuadro deinputo agregue un elemento. - Establezca el valor del
contentcon guiones bajos y coloque los elementos. - Agregue
letter-spacingywidthal cuadro deinput, y establezca:focuscomooutline: nonepara eliminar el cuadro azul.
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>
Prueba esto:
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>
Puede colocar un elemento que contenga "la máscara" detrás de la entrada y establecer el color de fondo de la entrada en transparente. Pero presta atención a los siguientes detalles:
- Utilice la familia de fuentes monoespaciado de modo que el ancho de
_y•sea siempre el mismo. - Termine su lista de fuentes con
monospacepara que el sistema operativo pueda elegir una fuente de ancho fijo si todas las fuentes especificadas no están disponibles. - El agente de usuario podría elegir una familia de fuentes, tamaño y altura de línea diferentes para los elementos de entrada. También puede elegir un tamaño y una altura de línea diferentes para las fuentes monoespaciadas (por ejemplo
mediumtamañomediumpodría calcularse como 13px en lugar de los 16px habituales ynormalaltura de líneanormalmenudo está desactivada en 1px para dos fuentes diferentes que tienen el mismo tamaño). Así que asegúrese de especificar estas propiedades explícitamente.
Aquí está el resultado:
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>
<fieldset>
<label for="password-input">
Enter New Pin</label>
<input type="password" name="password" id="passwordinput" inputmode="numeric" minlength="6" maxlength="6" size="6" value=""placeholder="input password">
<span class="hint">
New pin must be 6 digit number. only</span>
</fieldset>
input[type=password]{
border:1px;
border-bottom-style:dashed;
border-top-color:white;
border-left-color:white;
border-right-color:white;
}