Vai trò của bộ chọn :focus trong CSS

Bộ chọn :focus trong CSS

Bộ chọn :focus được dùng để chọn phần tử đang nhận trọng tâm (focus) — thường là khi người dùng click vào ô input hoặc điều hướng bằng phím Tab.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    input:focus {
      background-color: green;
    }
  </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 người dùng click vào bất kỳ ô input nào, nền sẽ chuyển sang màu xanh lá. Đây là cách phổ biến để cải thiện trải nghiệm người dùng (UX) cho form.