Floating label input com CSS
13d atrás
Neste tutorial vamos construir um input com efeito de label flutuante com #CSS puro.
Comece adicionando o HTML necessário:
<div class="input">
<input placeholder="" type="email">
<label>Email</label>
</div>
Adicione o seguir o CSS:
.input {
position: relative;
}
.input input {
border: 2px solid black;
box-sizing: border-box;
font-family: Arial;
font-size: 1em;
padding: 0.5em 1em;
width: 100%;
}
.input label {
background-color: white;
font-family: Arial;
left: 10px;
padding: 0 0.5em;
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: transform 0.1s;
}
Adicione mais esse estilo, que vai ser aplicado quando o input estiver focado ou com valor inserido:
.input input:focus + label, .input input:not(:placeholder-shown) + label {
transform: translateY(-150%);
}
Confira o resultado e código completo a seguir:
Comentários (0)