: tiêu điểm - Thủ thuật CSS

Anonim

Lớp :focusgiả trong CSS được sử dụng để tạo kiểu một phần tử hiện đang được nhắm mục tiêu bởi bàn phím hoặc được kích hoạt bằng chuột. Đây là một ví dụ:

textarea:focus ( background: pink; )

Bất kỳ phần tử nào (phổ biến nhất là các s và s) đều nằm trong “tiêu điểm” khi chúng được chọn và sẵn sàng nhập văn bản (như khi con trỏ nhấp nháy). Người dùng chuột có thể nhấp vào chúng (hoặc liên quan của chúng label) để lấy tiêu điểm và người dùng bàn phím có thể TAB vào chúng.

“Tabbing”

Việc sử dụng ký hiệu của :focuslớp giả là "phân chia tab" qua các phần tử. Nhiều trình duyệt có trạng thái tiêu điểm mặc định cho lựa chọn tab, đó là một đường viền chấm. Nó khá dễ dàng để loại bỏ, nhưng hãy đảm bảo thay thế nó bằng một thay thế phù hợp nếu bạn làm thế.

s, s, s, và textareas tất cả đều có :focus trạng thái theo mặc định, nhưng bạn có thể cung cấp cho một nhà nước tập trung vào bất kỳ yếu tố trong HTML. Cả thuộc tính contenteditabletabindexthuộc tính đều hoạt động cho điều này, như trong ví dụ này:

Có liên quan

Bài viết ngày 12/5/2017

Lớp giả `: focus-inside`

Chris Coyier

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ cách sử dụng cơ bản của :focus.