Etiquetas flotantes CSS puras para campos de entrada

Vista prévia

Descripción

Una solución CSS/CSS3 pura para crear etiquetas de marcador de posición flotantes para los campos de entrada, que se basan en el concepto de Matt D. Smith .

Uso básico

Cree una etiqueta para el campo de entrada.

<input type="text" name="first-name" required/>
<label for="first-name">First name</label>

Estilo del campo de entrada y la etiqueta de entrada.

form input {

display: block;

position: absolute;

-moz-box-sizing: border-box;

box-sizing: border-box;

width: 100%;

border: 0;

top: 1.2em;

background: none;

z-index: 1;

padding: 1px;

font-size: 1em;

font-family: "roboto", Helvetica, Arial;

letter-spacing: 0.012em;
}

form label {

font-family: "roboto", Helvetica, Arial;

display: block;

position: absolute;

margin-top: 2px;

padding: 1px;

letter-spacing: 0.012em;

color: #ACACAC;

font-size: 1em;

-webkit-animation-name: labelIn;

animation-name: labelIn;

-webkit-animation-duration: 0.35s;

animation-duration: 0.35s;

-webkit-animation-direction: reverse;

animation-direction: reverse;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

-webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);

animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

Cree las animaciones para la etiqueta flotante utilizando animaciones y fotogramas clave CSS3.

form input {

display: block;

position: absolute;

-moz-box-sizing: border-box;

box-sizing: border-box;

width: 100%;

border: 0;

top: 1.2em;

background: none;

z-index: 1;

padding: 1px;

font-size: 1em;

font-family: "roboto", Helvetica, Arial;

letter-spacing: 0.012em;
}

form label {

font-family: "roboto", Helvetica, Arial;

display: block;

position: absolute;

margin-top: 2px;

padding: 1px;

letter-spacing: 0.012em;

color: #ACACAC;

font-size: 1em;

-webkit-animation-name: labelIn;

animation-name: labelIn;

-webkit-animation-duration: 0.35s;

animation-duration: 0.35s;

-webkit-animation-direction: reverse;

animation-direction: reverse;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

-webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);

animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}