SnippetUI
← Back to snippets

Input con Etiqueta Flotante

Un campo de entrada moderno con un marcador de posición que aparece suavemente como una etiqueta cuando se enfoca.

HTMLCSS

Vista previa

Casos de uso y características

Las etiquetas flotantes son una interfaz de usuario de formulario de entrada moderna y que ocupa poco espacio, comúnmente utilizada en Material Design y otras aplicaciones.

  • Ahorro de espacio: Funciona como etiqueta y marcador de posición, lo que ahorra espacio vertical incluso cuando el espacio de la pantalla es limitado.

  • Aclaración del contenido de entrada: A los usuarios siempre se les muestra lo que significa un campo (etiqueta), tanto durante como después de escribir, para que los usuarios nunca se confundan.

  • Interacciones sofisticadas: Una animación suavemente elevada de la etiqueta enfocada proporciona información visual efectiva al usuario de que la entrada ahora está disponible.

Puntos de diseño y UX

  • Hack de marcador de posición: Utiliza la pseudoclase :placeholder-shown\ para determinar el estado (entrada o no) usando solo CSS, sin usar JavaScript. (* placeholder=" "\ en el lado HTML es un requisito obligatorio)

  • Garantizar la visibilidad: Cuando se levanta la etiqueta, la visibilidad se mantiene reduciendo el tamaño de fuente (scale(0.75)\) y aplicando fuente en negrita (font-weight: 500\) y el color del tema.

  • Accesibilidad: Al vincular el atributo label\ del elemento for\ y el input\ del elemento id\, admite lectores de pantalla y movimiento de enfoque al hacer clic en la etiqueta. Además, se especifica pointer-events: none\ para que la etiqueta no interfiera con la operación.

Cómo personalizar

Puede ajustar los siguientes puntos para adaptarlos al sistema de diseño de su proyecto.

  • Coloración: Cambie el color de .fli-input:focus\ y .fli-input:focus ~ .fli-label\ (actualmente #6366f1\) al color de la marca.

  • Esquinas redondeadas y sombras: Al cambiar border-radius\ y box-shadow\ de .fli-input\, puedes ajustarlo a un diseño más plano o a un diseño más redondeado y pop.

  • Tamaño de fuente: Si ajusta el tamaño de fuente o la tasa de reducción (scale(0.75)\) de la etiqueta, ajuste también el padding\ (especialmente el valor superior) de .fli-input\ para que la etiqueta y el texto de entrada no se superpongan.

Código de implementación

<div class="fli-group">

<input type="text" id="username" class="fli-input" placeholder=" " required />

<label for="username" class="fli-label">nombre de usuario</label>

</div>



<style>
.fli-group {

position: relative;

width: 100%;

max-width: 320px;

}



.fli-input {

width: 100%;

padding: 1.5rem 1.25rem 0.5rem;

font-size: 1rem;

font-family: inherit;

color: #0f172a;

background-color: #ffffff;

border: 2px solid #e2e8f0;

border-radius: 0.75rem;

outline: none;

box-sizing: border-box;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

}



.fli-input:hover {

border-color: #cbd5e1;

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);

}



.fli-input:focus {

border-color: #6366f1;

box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);

background-color: #ffffff;

}



.fli-label {

position: absolute;

top: 1.1rem;

left: 1.25rem;

font-size: 1rem;

color: #64748b;

pointer-events: none;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

transform-origin: left top;

}



/* Ingresando o estado completado */

.fli-input:focus ~ .fli-label,

.fli-input:not(:placeholder-shown) ~ .fli-label {

transform: translateY(-0.6rem) scale(0.75);

color: #6366f1;

font-weight: 500;

}



/* Fuera de foco pero aún ingresando */

.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {

color: #475569;

}
</style>

Estado de compatibilidad del navegador

  • Cromo: última versión

  • Safari: última versión

  • Firefox: última versión

  • Borde: última versión

La pseudoclase :placeholder-shown\ es compatible con todos los navegadores modernos y es segura de usar.