search

Hướng dẫn focus css là gì

Ngày đăng: 25/10/2022
Trả lời: 0
Lượt xem: 10

  • Trang chủ
  • Tham khảo
  • CSS
  • :focus

Show

Định nghĩa và sử dụng

":focus" thành phần sẽ focus khi được chọn.

Cấu trúc

tag:focus {
    property: value; 
}

Ví dụ

HTML viết:

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

input:focus {
	background: #ff0000;
}

Hiển thị trình duyệt khi đã có CSS:

Click vào sẽ thấy hiệu ứng.

Trình duyệt hỗ trợ

":focus" được hỗ trợ trong đa số các trình duyệt.

Ghi chú:
Không hỗ trợ cho trình duyệt IE6, IE7.
Cần khai báo cho trình duyệt IE8.

1) Bộ chọn :focus trong CSS

- Bộ chọn :focus dùng để chọn tất cả các phần tử INPUT, TEXTAREA, SELECT đang được người dùng truy cập vào (truy cập bằng cách click chuột vào nó hoặc bấm phím Tab để di chuyển vào nó)

2) Cách sử dụng bộ chọn :focus trong CSS

- Để sử dụng bộ chọn :focus, ta dùng cú pháp như sau:

:focus{
    các khai báo định dạng CSS
}

3) Một số ví dụ

- Chỉnh nền màu vàng cho các phần tử đang được người dùng truy cập vào

:focus{
    background-color:yellow;
}

Xem ví dụ

- Chỉnh nền màu vàng cho các phần tử