Tiếp theo, vì chúng tôi sẽ thêm các kiểu tiêu điểm của riêng mình với
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
1, nên chúng tôi sẽ muốn ẩn kiểu tiêu điểm :focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
2 mặc định của trình duyệt. Thay vì xóa hoàn toàn đường viền bằng cách đặt :focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
3, chúng tôi sẽ đặt :focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
4. Thao tác này sẽ ẩn đường viền trong khi vẫn đảm bảo đường viền vẫn hiển thị ở chế độ tương phản cao của WindowsSarah Higley có một bài đăng trên blog tuyệt vời với mẹo này và các mẹo khác về chế độ tương phản cao của Windows
:focus {
outline-color: transparent;
}
Chúng tôi cũng sẽ đặt
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
5 thành :focus {
outline-color: transparent;
}
0. Điều này là để đảm bảo kiểu tiêu điểm trình duyệt mặc định trong Edge, có 2 màu, không hiển thị:focus {
outline-color: transparent;
outline-style: solid;
}
Bây giờ chúng ta sẽ thêm phác thảo
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
1 của chúng ta. Kiểu này để lại một khoảng trống xung quanh thành phần tiêu điểm có cùng màu với màu nền được đặt cuối cùng và một vòng lấy nét có màu của vòng tiêu điểm được đặt cuối cùngMiễn là màu của vòng lấy nét có đủ độ tương phản so với màu nền, điều này sẽ đáp ứng tiêu chí thành công có thể nhìn thấy tiêu điểm
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
Cuối cùng, chúng ta sẽ thêm một số màu nền khác nhau. Màu khoảng trống của bóng hộp sẽ luôn khớp với màu nền của phần tử được lấy nét vì chúng tôi đang đặt màu nền bằng cách sửa đổi biến CSS
:focus {
outline-color: transparent;
}
2.bg-color {
background-color: var[--background-color];
}
.bg-color--vanilla {
--background-color: #fff8e9;
}
.bg-color--strawberry {
--background-color: #ffeae8;
}
.bg-color--chocolate {
--background-color: #ecdad4;
}
Kết quả
Đây là bản demo CodePen với kết quả cuối cùng. Bạn có thể kiểm tra các kiểu lấy nét bằng cách nhấn qua các nút
Tôi đã mày mò một công cụ có giao diện người dùng tùy chỉnh nhưng tôi vẫn muốn hỗ trợ điều hướng bằng bàn phím và điều hướng bằng bàn phím đi kèm với việc lập bảng để tập trung vào các yếu tố
Tôi có một phần tử là hộp kiểm bên dưới, nhưng chuyển đổi giữa nhãn "T" và "-", vì vậy tôi đang sử dụng CSS để thay đổi trạng thái trực quan
.bool input:checked + label.t::before {
content: 'T';
}
.bool input + label::before {
content: '-';
width: 100%;
font-size: inherit;
line-height: inherit;
}
Vấn đề là khi tôi đánh dấu tiêu điểm vào hộp kiểm, văn bản nhãn trông không có tiêu điểm. Tôi có thể thêm đường viền [hoặc thứ gì đó] vào nhãn, nhưng tôi muốn nó trông giống như vòng tiêu điểm mặc định của trình duyệt
TỚI. Firefox có
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
7 khen ngợi màu vòng tiêu điểm của webkit và [may mắn thay] Firefox bỏ qua màu có tiền tố :focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
8Nếu bạn tập trung vào một yếu tố tương tác e. g trường nhập hoặc nút, trình duyệt sẽ hiển thị vòng tiêu điểm xung quanh nó. Hành vi như vậy khá thuận tiện khi nói đến khả năng truy cập, tuy nhiên kiểu mặc định có thể không phù hợp với hướng dẫn kiểu của bạn. Nó có thể hấp dẫn để
Tuy nhiên, đó là một anti-pattern, vì người dùng sử dụng bàn phím làm thiết bị đầu vào sẽ không thể xác định phần tử nào hiện đang được focus và nhận thông tin đầu vào từ bàn phím
Bạn có thể dễ dàng ghi đè kiểu dáng mặc định bằng cách sử dụng quy tắc CSS sau
Tuy nhiên, nó sẽ áp dụng đường viền khi một phần tử được lấy tiêu điểm bất kể nguồn. Đó là hành vi hơi khác so với hành vi mặc định, e. g. phần tử nút chỉ nhận được vòng lấy nét nếu nó đã được lấy nét bằng bàn phím. Nếu bạn chỉ muốn thay đổi đường viền cho các tình huống khi vòng tiêu điểm hiển thị từ quan điểm của trình duyệt, bạn có thể hoàn thành mục tiêu với sự trợ giúp của quy tắc sau
Trình duyệt hỗ trợ khá tốt, tuy nhiên bạn có thể dự phòng sử dụng polyfill nếu cần
Cuối cùng nhưng không kém phần quan trọng, nếu bạn sử dụng Vật liệu góc, bạn có thể sử dụng hoặc một trong các lệnh liên quan [cdkMonitorElementFocus và cdkMonitorSubtreeFocus] để lấy nguồn của sự kiện tiêu điểm. Bạn có thể xác định quy tắc CSS sau dựa trên sự hiện diện của lớp CSS phân biệt nguồn tiêu điểm
Chỉ báo tiêu điểm [thường được biểu thị bằng "vòng tiêu điểm"] xác định thành phần hiện đang được tiêu điểm trên trang của bạn. Đối với những người dùng không sử dụng được chuột thì chỉ số này cực kỳ quan trọng vì nó đóng vai trò như một điểm tựa cho con trỏ chuột của họ.
Nếu chỉ báo tiêu điểm mặc định của trình duyệt xung đột với thiết kế của bạn, bạn có thể sử dụng CSS để định kiểu lại. Chỉ cần nhớ ghi nhớ người dùng bàn phím của bạn
Sử dụng :focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
9 để luôn hiển thị chỉ báo tiêu điểm
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
Lớp giả
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
9 được áp dụng bất cứ khi nào một phần tử được tập trung, bất kể thiết bị đầu vào [chuột, bàn phím, bút stylus, v.v.]. ] hoặc phương pháp được sử dụng để tập trung nó. Ví dụ: :focus {
outline-color: transparent;
}
1 bên dưới có một :focus {
outline-color: transparent;
}
2 khiến nó có thể được đặt tiêu điểm. Nó cũng có một phong cách tùy chỉnh cho trạng thái :focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
9 của nódiv[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Bất kể bạn sử dụng chuột để bấm vào nó hay bàn phím để tab vào nó, thì
:focus {
outline-color: transparent;
}
1 sẽ luôn giống nhauThật không may, các trình duyệt có thể không phù hợp với cách chúng áp dụng tiêu điểm. Việc một phần tử có nhận được tiêu điểm hay không có thể phụ thuộc vào trình duyệt và hệ điều hành
Ví dụ:
button:focus {
outline: 4px dashed orange;
}
2 bên dưới cũng có kiểu tùy chỉnh cho trạng thái :focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
9 của nó________số 8Nếu bạn nhấp vào
button:focus {
outline: 4px dashed orange;
}
2 bằng chuột trong Chrome trên macOS, bạn sẽ thấy kiểu tiêu điểm tùy chỉnh của nó. Tuy nhiên, bạn sẽ không thấy kiểu tiêu điểm tùy chỉnh nếu nhấp vào button:focus {
outline: 4px dashed orange;
}
2 trong Safari trên macOS. Điều này là do trong Safari, phần tử không nhận được tiêu điểm khi bạn nhấp vào phần tử đóXem phần tóm tắt về những trình duyệt và hệ điều hành nào sẽ áp dụng tiêu điểm cho các phần tử
button:focus {
outline: 4px dashed orange;
}
2Do hành vi lấy nét không nhất quán nên có thể cần thử nghiệm một chút trên các thiết bị khác nhau để đảm bảo kiểu lấy nét của bạn được người dùng chấp nhận
Sử dụng button:focus {
outline: 4px dashed orange;
}
8 để hiển thị có chọn lọc chỉ báo tiêu điểm
button:focus {
outline: 4px dashed orange;
}
Lớp giả
button:focus {
outline: 4px dashed orange;
}
8 mới được áp dụng bất cứ khi nào một phần tử nhận được tiêu điểm và trình duyệt xác định thông qua phỏng đoán rằng việc hiển thị chỉ báo tiêu điểm sẽ có lợi cho người dùng. Đặc biệt, nếu tương tác gần đây nhất của người dùng thông qua bàn phím và phím bấm không bao gồm phím meta, :focus {
outline-color: transparent;
}
50 / :focus {
outline-color: transparent;
}
51 hoặc :focus {
outline-color: transparent;
}
52, thì button:focus {
outline: 4px dashed orange;
}
8 sẽ khớpNút trong ví dụ bên dưới sẽ hiển thị có chọn lọc chỉ báo tiêu điểm. Nếu bạn sử dụng chuột để nhấp vào nó, kết quả sẽ khác so với khi bạn lần đầu tiên sử dụng bàn phím để tab vào nó
:focus {
outline-color: transparent;
}
5Sử dụng :focus {
outline-color: transparent;
}
54 để tạo kiểu cho phần tử gốc của phần tử được tập trung
:focus {
outline-color: transparent;
}
Lớp giả
:focus {
outline-color: transparent;
}
54 được áp dụng cho một phần tử khi chính phần tử đó nhận tiêu điểm hoặc khi một phần tử khác bên trong phần tử đó nhận tiêu điểmNó có thể được sử dụng để đánh dấu một vùng của trang nhằm thu hút sự chú ý của người dùng đến vùng đó. Ví dụ: biểu mẫu bên dưới nhận được tiêu điểm cả khi biểu mẫu được chọn và cả khi bất kỳ nút radio nào của biểu mẫu được chọn
:focus {
outline-color: transparent;
outline-style: solid;
}
2Khi nào hiển thị chỉ báo lấy nét
Một nguyên tắc nhỏ là hãy tự hỏi: "Nếu bạn nhấp vào điều khiển này khi đang sử dụng thiết bị di động, bạn có muốn nó hiển thị bàn phím không?"
Nếu câu trả lời là "có", thì điều khiển có thể luôn hiển thị chỉ báo tiêu điểm, bất kể thiết bị đầu vào được sử dụng để lấy nét. Một ví dụ điển hình là phần tử
:focus {
outline-color: transparent;
}
56. Người dùng sẽ cần gửi thông tin đầu vào đến phần tử thông qua bàn phím bất kể phần tử đầu vào ban đầu nhận được tiêu điểm như thế nào, vì vậy sẽ hữu ích khi luôn hiển thị chỉ báo tiêu điểmNếu câu trả lời là "không", thì bộ điều khiển có thể chọn hiển thị có chọn lọc chỉ báo tiêu điểm. Một ví dụ điển hình là phần tử
button:focus {
outline: 4px dashed orange;
}
2. Nếu người dùng nhấp vào nó bằng chuột hoặc màn hình cảm ứng, hành động đã hoàn tất và có thể không cần chỉ báo tiêu điểm. Tuy nhiên, nếu người dùng đang điều hướng bằng bàn phím, sẽ hữu ích khi hiển thị chỉ báo tiêu điểm để người dùng có thể quyết định xem họ có muốn bấm vào điều khiển hay không bằng cách sử dụng phím :focus {
outline-color: transparent;
}
58 hoặc :focus {
outline-color: transparent;
}
59Tránh :focus {
outline-color: transparent;
outline-style: solid;
}
20
:focus {
outline-color: transparent;
outline-style: solid;
}
Thành thật mà nói, cách các trình duyệt quyết định khi nào vẽ một chỉ báo tiêu điểm là rất khó hiểu. Thay đổi giao diện của phần tử
button:focus {
outline: 4px dashed orange;
}
2 bằng CSS hoặc gán cho phần tử một giá trị :focus {
outline-color: transparent;
}
2 sẽ khiến hành vi vòng tiêu điểm mặc định của trình duyệt bắt đầu hoạt độngMột cách chống mẫu rất phổ biến là xóa chỉ báo tiêu điểm bằng CSS, chẳng hạn như
:focus {
outline-color: transparent;
outline-style: solid;
}
9Một cách tốt hơn để giải quyết vấn đề này là sử dụng kết hợp
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var[--background-color],
0 0 0 5px var[--focus-ring-color];
}
9 và button:focus {
outline: 4px dashed orange;
}
8 polyfill. Khối mã đầu tiên bên dưới minh họa cách thức hoạt động của polyfill và ứng dụng mẫu bên dưới cung cấp ví dụ về cách sử dụng polyfill để thay đổi chỉ báo tiêu điểm trên một nút