CSS:focus psuedo-class chọn một phần tử ở trạng thái tiêu điểm của nó. Điều này xảy ra khi bạn nhấp vào một phần tử hoặc chọn nó bằng nút tab. :tiêu điểm đứng sau tên của phần tử bạn muốn chọn.
Bạn có thể chỉ muốn áp dụng một kiểu cho một phần tử khi nó có tiêu điểm trên trang web. Ví dụ:bạn có thể muốn áp dụng đường viền cho trường biểu mẫu khi người dùng nhấp vào trường biểu mẫu.
Đó là nơi xuất hiện của CSS:focus pseudo-class.:Focus pseudo-class áp dụng một kiểu khi người dùng nhấp vào một phần tử hoặc chọn phần tử bằng cách sử dụng tab nút bàn phím.
Hướng dẫn này sẽ thảo luận, với một ví dụ, những điều cơ bản của CSS:lớp giả tiêu điểm và cách sử dụng nó trong mã của bạn. Khi đọc xong hướng dẫn này, bạn sẽ trở thành một chuyên gia trong việc sử dụng:lớp giả tiêu điểm để áp dụng các kiểu cho các phần tử trong tiêu điểm.
Lớp giả CSS
Lớp giả là một từ khóa được thêm vào bộ chọn CSS. Lớp giả chỉ định trạng thái mà một phần tử sẽ xuất hiện để một kiểu áp dụng. Các lớp giả được thêm vào sau một bộ chọn.
Lớp giả cho phép bạn thiết lập các quy tắc cho các phần tử ở trạng thái đặc biệt, chẳng hạn như khi bạn đặt tiêu điểm phần tử. Đối với hướng dẫn này, chúng tôi sẽ tập trung vào:lớp giả tiêu điểm.
CSS:focus Pseudo-Class
Lớp giả CSS:focus áp dụng kiểu cho một phần tử khi phần tử đã nhận được tiêu điểm trên trang web. Nếu người dùng nhấp vào một phần tử hoặc chọn phần tử đó bằng tab then chốt, nó sẽ trở thành một yếu tố tập trung.
Cú pháp cho:lớp giả tiêu điểm là:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
textarea:focus {
border: 1px solid blue;
}
Mã này thiết lập một đường viền màu xanh lam liền khối rộng một pixel xung quanh bất kỳ phần tử HTML
Bạn có thể thấy lớp giả của chúng tôi được áp dụng sau phần tử chúng tôi muốn chọn. Cần phải chỉ định một:lớp psuedo tập trung cho mỗi phần tử mà bạn muốn phân lớp để áp dụng trong danh sách các bộ chọn.
Hãy xem xét cú pháp này:
Quy tắc CSS trong mã của chúng tôi được áp dụng cho tất cả các phần tử và tất cả các thẻ
Một tình huống phổ biến trong đó:bộ chọn tiêu điểm được sử dụng là để tạo kiểu cho các biểu mẫu web. Ví dụ:bạn có thể muốn màu nền của trường biểu mẫu web thay đổi khi người dùng bấm vào trường biểu mẫu. Hoặc bạn có thể muốn thay đổi màu của đường viền để thay đổi khi người dùng nhấp vào trường biểu mẫu.
Chúng tôi đã được yêu cầu thiết kế trường biểu mẫu web cho một trang web thu thập tên của người dùng. Khi trường biểu mẫu chuyển sang trạng thái tiêu điểm, một đường viền màu cam sẽ được áp dụng cho trường biểu mẫu. Ngoài ra, màu nền của trường biểu mẫu sẽ chuyển thành màu xám nhạt.
Chúng tôi có thể sử dụng mã sau để thiết kế trường biểu mẫu này:
Chúng tôi đã xác định một trường HTML với tên lớp là textField . Trường nhập này hiển thị văn bản giữ chỗ Tên đầu tiên .
Khi người dùng di chuyển trường biểu mẫu vào tiêu điểm, các thuộc tính CSS trong .textField:tiêu điểm của chúng tôi quy tắc được áp dụng. Các kiểu này đặt màu nền xám nhạt và áp dụng đường viền CSS màu cam đặc rộng 2px xung quanh trường biểu mẫu của chúng tôi.
Khi người dùng di chuyển trường biểu mẫu ra khỏi tiêu điểm, những kiểu này không còn được áp dụng nữa.
Lớp giả:tiêu điểm áp dụng một kiểu khi người dùng di chuyển một phần tử web vào tiêu điểm trên trang web. :tiêu điểm thường được sử dụng để áp dụng kiểu cho các trường trong biểu mẫu được kích hoạt khi người dùng di chuyển trường biểu mẫu vào tiêu điểm.
:focus là một trong nhiều lớp giả CSS, chẳng hạn như:hover. Để sử dụng lớp giả, hãy chỉ định tên của lớp giả sau bộ chọn CSS của bạn.
Bạn có muốn tìm hiểu thêm về CSS? Hãy xem hướng dẫn Cách học CSS của chúng tôi. Bạn sẽ tìm thấy các mẹo hữu ích về cách học CSS. Ngoài ra, hướng dẫn của chúng tôi bao gồm danh sách các tài nguyên học tập hàng đầu để giúp bạn thành thạo CSS. input, textarea:focus {
border: 1px solid blue;
} :focus CSS Ví dụ
<html>
<input class="textField" placeholder="First Name">
<style>
.textField:focus {
background-color: lightgray;
border: 2px solid orange;
} 
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi. Kết luận