CSS :focus – Hướng Dẫn Sử Dụng

CSS pseudo-class :focus chọn element ở trạng thái focus. Xảy ra khi click vào element hoặc select bằng phím Tab. :focus viết sau tên element muốn select.

Có thể muốn apply style cho element chỉ khi nó có focus trên trang. Ví dụ: thêm border cho form field khi user click vào nó.

Đó là lúc :focus pseudo-class xuất hiện. Nó apply style khi user click element hoặc select bằng phím Tab.

Tutorial này thảo luận cơ bản :focus pseudo-class với ví dụ, cách dùng trong code. Đọc xong bạn sẽ expert dùng :focus để style element focus.

CSS Pseudo-Classes

Pseudo-class là keyword thêm vào CSS selector. Chỉ định trạng thái element phải ở đó để style apply. Pseudo-class viết sau selector.

Pseudo-class cho phép set rule cho element ở trạng thái đặc biệt, ví dụ khi element nhận focus. Tutorial này tập trung vào :focus.

CSS :focus Pseudo-Class

:focus áp dụng style cho element khi element nhận focus trên trang. User click hoặc Tab vào → element trở thành focused element.

Cú pháp :focus pseudo-class:

textarea:focus { border: 1px solid blue; }

Code này set border 1px solid blue cho mọi <textarea>. Rule chỉ apply khi <textarea> ở trạng thái focus.

Pseudo-class viết sau element muốn select. Cần chỉ định :focus cho từng element trong danh sách selector.

Xem cú pháp này:

input, textarea:focus { border: 1px solid blue; }

Rule apply cho TẤT CẢ <input> VÀ <textarea> khi user focus vào textarea. Nhưng KHÔNG apply cho <input> khi focus.

Scenario phổ biến dùng :focus: style web form. Ví dụ: đổi background color form field khi user click, hoặc đổi border color khi focus.

Ví Dụ :focus CSS

Yêu cầu: design web form field thu thập first name. Khi focus → border cam, background xám nhạt.

Code:

<html> 
  <input class="textField" placeholder="First Name"> 
  <style> 
    .textField:focus { background-color: lightgray; border: 2px solid orange; } 
  </style>

Bấm Run để xem output.

HTML <input> class textField, placeholder "First Name". Khi user focus vào field, CSS properties trong .textField:focus apply: background xám nhạt, border 2px solid cam.

Khi user focus ra khỏi field → style không còn apply.

Kết Luận

:focus pseudo-class apply style khi user đưa web element vào focus. Thường dùng style form field trigger khi user focus vào field.

:focus là một trong nhiều pseudo-class (như :hover). Để dùng: chỉ định tên pseudo-class sau CSS selector.

Muốn học thêm CSS? Xem How to Learn CSS guide – tips actionable và top learning resources.