Etiqueta de entrada

2,519 cleanapp42

Abrir en el editor Publica tu código

Recomendado

29 August 2025

Fragmento de animación de memoria CSS

11 October 2025

Fragmento de animación de carga de CSS

30 November 2025

Formulario de inicio de sesión HTML (francés)

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