Animated Label Input Tag

1427 cleanapp42

Open In Editor Publish Your Code

Animated Label Input Tag

Recommended

19 October 2024

Animated HTML Login Form

16 February 2024

Infinite Tags Scroll

17 May 2024

Animated home and registration login form

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;
}

JS