Sử dụng pseudo-class :focus trong CSS

Pseudo-class :focus

:focus chọn phần tử đang nhận trọng tâm (focus) — khi click, tap, hoặc Tab vào. Thường dùng cho <input>, <textarea>, <select>, <button>, <a>.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    input:focus {
      background-color: orange;
    }
  </style>
</head>
<body>
  <form action="">
    Môn học: <input type="text" name="subject"><br>
    Sinh viên: <input type="text" name="student"><br>
    Tuổi: <input type="number" name="age"><br>
    <input type="submit" value="Gửi">
  </form>
</body>
</html>

Khi focus vào ô input, nền chuyển cam. Quan trọng cho accessibility (khả năng tiếp cận) - luôn tạo kiểu focus rõ ràng.