WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por fastcloud893
1228
Baxriddinov
Abrir no Editor
Publique Seu Código
Recomendado
27 December 2024
Um código por efficientfunction480
17 April 2025
Um código de Metehan
10 June 2025
Um Código por alejandrokundrah
HTML
Copy
Input Validation
Sign in
Email
Password
Login
CSS
Copy
:root { --valid: hsl(140 80% 40%); --invalid: hsl(10 80% 40%); --input: hsl(0 0% 0%); } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; font-weight: 100; background-color: hsl(0 0% 6%); color: hsl(0 0% 98%); } .form-group { --active: 0; container-type: inline-size; flex: 1; } form { width: 40ch; } input { --is-valid: 0; --is-invalid: 0; background: linear-gradient(var(--input), var(--input)) padding-box, linear-gradient(var(--invalid), var(--invalid)) calc((1 - var(--is-invalid)) * -100cqi) 0 / 100% 100% border-box, linear-gradient(var(--valid), var(--valid)) calc((1 - var(--is-valid)) * 100cqi) 0 / 100% 100% border-box, var(--input); border: 2px solid transparent; font-size: 1rem; background-repeat: no-repeat; max-width: 100%; font-family: "Geist Sans", "SF Pro", sans-serif; font-weight: 40; background-color: #3b4148; border-radius: 10px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 100%; outline: 0; height: 50px; } label { margin-bottom: 0.5rem; display: inline-block; padding-left: 5px; opacity: calc(var(--active) + 0.45); transition: opacity 0.5s; } .form-group:focus-within { --active: 1; } input:invalid:not(:placeholder-shown):not(:focus-visible) { --is-invalid: 1; } input:valid { --is-valid: 1; } @media (prefers-reduced-motion: no-preference) { input { transition: background-position 0.5s; } } .submitbtn { background: #2a292c; border: 0; margin-top: 0.5rem; width: 100%; height: 45px; border-radius: 10px; color: white; cursor: pointer; transition: background 0.3s ease-in-out; } .submitbtn:hover { background: #404949; } h1{ display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; font-weight: 400; font-size: 30px; color: #a9a9a9; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */