Tidadigi Logo

CSS : valid Selector

:valid selector trong CSS được dùng chọn các phần tử form hợp lệ.:valid selector áp dụng cho các input element như trường văn bản, email, số, v.v. Ví dụ, nó hoạt động trên các input element có thuộc tính min và max. Trường email cần có địa chỉ email hợp lệ hoặc trường số với giá trị số hợp lệ.

Cú pháp

:valid {
    // CSS property
}

Ví dụ về :valid Selector trong CSS

Ví dụ: Trong ví dụ này, :valid selector được dùng để tạo kiểu cho trường input email. Màu nền sẽ là xanh lá và chữ trắng khi email nhập vào hợp lệ.

html 
<!DOCTYPE html>
<html>

<head>
    <title>valid selector</title>
    <style>
        h1 {
            color: green;
        }

        input:valid {
            background-color: green;
            color: white;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>:valid Selector</h2>
    Email Address:
    <input type="email" 
           placeholder="abc@gfg.com">
</body>

</html>

Output: Supported Browsers

Các trình duyệt hỗ trợ :valid selector được liệt kê bên dưới:


Last Updated : 21/07/2025