Tạo kiểu cho input có required với CSS

Bộ chọn :required

:required chọn <input>, <select>, <textarea> có thuộc tính required. Dùng để đánh dấu trường bắt buộc trực quan.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    input:required {
      background-color: orange;
    }
  </style>
</head>
<body>
  <form>
    Môn học: <input type="text" name="subject" value="C++"><br> <!-- optional -->
    Sinh viên: <input type="text" name="student" value="Amit" required><br> <!-- required -->
  </form>
</body>
</html>

Ô "Sinh viên" có required → nền cam. Ô "Môn học" không có → không khớp. Kết hợp :optional, :valid, :invalid cho form UX hoàn chỉnh.