Etichetta di input

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

8 May 2025

Un codice di ytr3d3

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: "poppins", sans-serif;
    box-sizing: border-box;
    font-weight: 500;
}

body {
    min-height: 100svh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-container {
    position: relative;
    max-width: 350px;
    width: 100%;
    height: 45px;
}

input {
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: .3rem;
    border: 1.5pt solid #ccc;
    padding-left: 16px;
    font-size: 17px;
}

label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: all 0.2s ease-in-out;
    color: #aaa;
    pointer-events: none;
}

input:focus+label,
input:valid+label {
    left: 14px;
    font-size: 15px;
    top: 0;
    color: #111;
    line-height: 1;
    background-color: #fff;
    padding-inline: 5px;
    font-weight: 600;
}

input:focus,
input:valid {
    border-color: #111;
}

Etichetta di input

Consigliato

armadietto animato

Un codice di alejandrokundrah

Un codice di ytr3d3

HTML

CSS

JS

Consigliato

armadietto animato

Un codice di alejandrokundrah

Un codice di ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS