HTML + CSSInputs

Etiqueta flotante de color

La etiqueta vive dentro del campo y sube arriba, más pequeña y en color, cuando empiezas a escribir.

Ajustes

16px
1x

Código

<label class="uv-if"><input placeholder=" "><span>Correo electrónico</span></label>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Inputs

Dónde usarlo

Un input con label flotante mantiene el formulario compacto sin perder la etiqueta al escribir, como pasa con un placeholder normal. Encaja en una pantalla de login, en la dirección de envío de una tienda o en el formulario de contacto de una clínica dental. Al hacer clic, la etiqueta sube, se encoge y toma tu color.

Donde mejor funciona es en el móvil, donde el espacio vertical escasea. Usa etiquetas de una o dos palabras, porque se reducen a tres cuartos de su tamaño. Para preguntas largas, una etiqueta normal encima del campo se lee mejor.