Etiquetas flotantes CSS puras para campos de texto

Vista prévia

Descripción

Con las transiciones CSS y CSS3 puras, podemos crear etiquetas flotantes & animadas cuando un campo de texto se rellena con texto. Inspirado por < a href = "https://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction" target = "_ blank" rel = "noopener" > Matt D. Smith's Design y creado por < a href = "https://codepen.io/skielbasa/" target = "_ blank" rel = "noopener" > skielbasa .

Funcionamiento

Crear campos de texto (entrada o TextArea) con etiquetas de texto.

<div class="styled-input">

<input type="text" required />

<label>Name</label>

<span></span> </div>

<div class="styled-input wide">

<textarea required></textarea>

<label>Message</label>

<span></span> </div>

Los estilos CSS para animar las etiquetas flotantes cuando se centran los campos de texto.

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
 font-size: 0.75em;
 color: #8e44ad;
 top: -2.25rem;
 -webkit-transition: all 0.125s ease;
 transition: all 0.125s ease;
}

.styled-input {

float: left;

width: 33.3333%;

margin: 2rem 0 1rem;

position: relative;
}

.styled-input label {

color: #999;

padding: 1rem;

position: absolute;

top: 0;

left: 0;

-webkit-transition: all 0.25s ease;

transition: all 0.25s ease;

pointer-events: none;
}

.styled-input.wide { width: 100%; }

input,
textarea {

padding: 1rem 1rem;

border: 0;

width: 100%;

font-size: 1rem;
}

input ~ span,
textarea ~ span {

display: block;

width: 0;

height: 3px;

background: #8e44ad;

position: absolute;

bottom: 0;

left: 0;

-webkit-transition: all 0.125s ease;

transition: all 0.125s ease;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {

width: 100%;

-webkit-transition: all 0.075s ease;

transition: all 0.075s ease;
}

textarea {

width: 100%;

min-height: 15em;
}