Vai trò bộ chọn :valid trong CSS

Bộ chọn :valid

:valid chọn các phần tử form (input, select, textarea) khi giá trị **thỏa mãn** tất cả ràng buộc xác thực (type, pattern, required, min, max...).

Ví dụ minh họa

<!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>Email hợp lệ → nền đỏ, chữ trắng.</p>
</body>
</html>

Email "amit@example.com" đúng định dạng → nền đỏ. Kết hợp :invalid (nền đỏ khi sai) và :valid (nền xanh khi đúng) cho UX tốt. Lưu ý: input rỗng không required cũng coi là :valid.