Marcador de entrada flotante de diseño de material CSS puro

Vista prévia

Descripción

Una solución CSS/CSS3 pura hecha por < a href = "https://codepen.io/mildrenben" target = "_ blank" rel = "noopener" > mildrenben para crear campos de texto inspirados en el diseño de materiales que transforman los marcadores de posición en etiquetas de texto flotantes.

Funcionamiento

Cree campos de entrada normales con marcadores de posición.

<input placeholder="Username" type="text" required>
<input placeholder="Password" type="password" required>

Los estilos CSS primarios para los campos de entrada.

input {

margin: 40px 25px;

width: 200px;

display: block;

border: none;

padding: 10px 0;

border-bottom: solid 1px #1abc9c;

-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);

background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);

background-position: -200px 0;

background-size: 200px 100%;

background-repeat: no-repeat;

color: #0e6252;
}

input:focus, input:valid {
 box-shadow: none;
 outline: none;
 background-position: 0 0;
}

Anime los marcadores de posición en el foco.

input::-webkit-input-placeholder {
 font-family: 'roboto', sans-serif;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
 color: #1abc9c;
 font-size: 11px;
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
 visibility: visible !important;
}