WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von fastcloud893
1227
Baxriddinov
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
17 April 2025
Ein Code von Metehan
25 May 2025
Ein Code von Liamgilles76
1 December 2024
Ein Code von robustvariable23
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) */