English
Deutsch
Français
Italiano
Español
HTML
Copiar HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example :user-valid и :user-invalid</title> </head> <body> <form> <label for="email">Enter e-mail:</label> <input type="email" id="email" name="email" placeholder="example@mail.com" required> </form> </body> </html>
CSS
Copiar CSS
body { font-family: Arial, sans-serif; padding: 20px; } form { max-width: 300px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background: #f9f9f9; } label { display: block; margin-bottom: 5px; } input { width: 90%; padding: 8px; border: 2px solid #ccc; border-radius: 4px; font-size: 1rem; } input:invalid { border-color: red; } input:valid { border-color: green; } input:user-invalid { border-color: red; box-shadow: 0 0 8px rgba(255, 0, 0, 0.5); } input:user-valid { border-color: green; box-shadow: 0 0 8px rgba(0, 255, 0, 0.5); }
JavaScript
Copiar JS
Resultado
Descargar archivo