Tạo kiểu cho tất cả <input> có giá trị hợp lệ với CSS (:valid)

Giới thiệu

Sử dụng bộ chọn CSS :valid để tạo kiểu cho tất cả phần tử <input> có giá trị hợp lệ.

Ví dụ

<!DOCTYPE html>
<html>
<head>
    <style>
        input:valid {
            background: red;
            color: white;
        }
    </style>
</head>
<body>
    <h2>Tiêu đề</h2>
    <input type="email" value="amit@example.com">
    <p>Kiểu (nền đỏ) xuất hiện nếu bạn nhập địa chỉ email liên quan/hợp lệ.</p>
</body>
</html>

Kết quả