Floating label input com CSS

62d 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)