CSS: focus-trong Pseudo-Class

Việc chọn một phần tử mẹ từ lâu đã không thể thực hiện chỉ bằng CSS, nhưng một lớp giả,: focus-inside , sẽ thay đổi phần nào câu chuyện đó. Nó cho phép tạo kiểu một phần tử khi nó có tiêu điểm, nhưng cũng có thể khi bất kỳ phần tử nào bên trong của nó (con cháu) có tiêu điểm. Một ví dụ chính là với một biểu mẫu mà bạn muốn phần tử containers được tạo kiểu theo một cách nhất định khi user tập trung vào một trong các phần tử đầu vào.

Mã HTML và CSS

Đây là một ví dụ về việc sử dụng : focus-inside với một biểu mẫu. Hãy bắt đầu với đánh dấu này:

<form tabindex="0" class="myForm">   <h3>What's your favorite color?</h3>   <input type="text"> </form>

Và các luật CSS của ta như sau:

.myForm:focus-within {   background: #f8f8f8     repeating-linear-gradient(       45deg,       transparent,       transparent 35px,       rgba(255, 255, 255, 0.5) 35px,       rgba(255, 255, 255, 0.5) 70px     ); } .myForm:focus-within::before {   content: "I'm a happy selected form!";   color: rgb(239, 187, 53); }

Demo làm việc

Dưới đây, bạn có thể xem kết quả nếu bạn đang sử dụng trình duyệt hỗ trợ. Lưu ý cách nền khác nhau được áp dụng cho phần tử biểu mẫu chứa khi bản thân biểu mẫu được đặt tiêu điểm hoặc khi một trong các đầu vào được đặt tiêu điểm.

Nếu ta đã sử dụng kiểu cũ tốt : focus pseudo-class thay vì : focus-inside , thì biểu mẫu containers của ta sẽ chỉ được tạo kiểu khi tiêu điểm nằm trên chính biểu mẫu, chứ không phải khi đầu vào được lấy nét:

Cảm ơn Lea Verou về mẫu nền CSS.

Kết luận

Để : focus-inside hoạt động như mong đợi, bạn sẽ phải đảm bảo các phần tử bên trong của containers có thể lấy nét được. Các phần tử đầu vào có thể lấy tiêu điểm theo mặc định, nhưng các phần tử div , img hoặc p chẳng hạn, thì không. Thuộc tính tabindex được dùng để làm cho một phần tử có thể lấy tiêu điểm. Phần tử containers cũng phải có thể lấy tiêu điểm để nhận được kiểu dáng khi chỉ lấy nét từ containers .

Kiểm tra khả năng tương thích của trình duyệt: Kể từ năm 2020, tất cả các trình duyệt hiện đại đều hỗ trợ focus-within , nhưng hãy kiểm tra Tôi có thể sử dụng để biết hỗ trợ chi tiết, dành cho từng version cụ thể.

Tags:

Các tin liên quan

Thuộc tính z-index CSS Mighty
2020-09-01
Hiểu từ khóa màu hiện tại trong CSS
2020-09-01
Giới thiệu về Bộ đếm CSS
2020-08-31
Thuộc tính CSS text-shadow
2020-08-20
Cách tạo hiệu ứng cuộn thị sai với CSS thuần túy trong Chrome
2020-08-03
Cách tạo trang đích có kiểu dáng với CSS Tailwind
2020-06-23
Triển khai một CSS thuần túy có thể thu gọn
2020-05-02
Căn giữa mọi thứ trong CSS bằng Flexbox
2020-05-02
Tham chiếu phông chữ hệ thống CSS
2020-03-29
Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04

CSS: focus-trong Pseudo-Class

Mã HTML và CSS

Demo làm việc

Màu yêu thích của bạn là gì?

Kết luận