Tôi muốn thêm tiêu điểm vào các nút của mình để khi ai đó nhấp vào một, nó sẽ thay đổi màu sắc tôi đã thử .button:focus
nhưng không có gì xảy ra
I tried .button:focus
but nothing happens
Đây là đoạn trích của tôi.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
.button {
padding:0;
margin:0;
border:none;
font-size:14px;
background:#333;
color: grey;
height:50px;
width:134px;
font-variant:small-caps;
}
.button:hover {
padding:0;
margin:0;
border:none;
font-size:14px;
background:#333;
color: #FF0000;
height:50pxpx;
width:134px;
text-decoration:none;
font-variant:small-caps;
background-color: #111;
}
.button:focus {
background:blue;
}
Jal
41.2K23 Huy hiệu vàng166 Huy hiệu bạc296 Huy hiệu Đồng23 gold badges166 silver badges296 bronze badges
Khi được hỏi ngày 16 tháng 5 năm 2016 lúc 21:49May 16, 2016 at 21:49
3
Dây dệt: //kodeweave.sourceforge.net/editor/#9838274385F08A1729905C5274944518 //kodeweave.sourceforge.net/editor/#9838274385f08a1729905c5274944518
:focus
chỉ hoạt động trên các yếu tố input[type=text]
và textarea
, nhưng cũng hoạt động trên các yếu tố khác như div nếu chúng có thuộc tính
0.Vì vậy, hãy tập trung cho phần tử
1,
2 hoặc nút sẽ không hoạt động.Thay vào đó sử dụng
3Mẹo nhanh: Bạn có thể sử dụng Dịch vụ xác thực đánh dấu W3C để kiểm tra xem HTML của bạn có hợp lệ không.: You can use W3C Markup Validation Service to check if your HTML is valid.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #333;
}
li {
float: left;
}
.button {
cursor: pointer;
padding: 0;
margin: 0;
border: 0;
font-size: 14px;
background: #333;
color: grey;
height: 50px;
width: 134px;
font-variant: small-caps;
}
.button:hover {
padding: 0;
margin: 0;
border: 0;
font-size: 14px;
color: #f00;
height: 50px;
width: 134px;
text-decoration: none;
font-variant: small-caps;
background: #111;
}
.button:active {
background: blue;
}
Đã trả lời ngày 16 tháng 5 năm 2016 lúc 22:13May 16, 2016 at 22:13
Michael Schwartzmichael SchwartzMichael Schwartz
7,84314 Huy hiệu vàng75 Huy hiệu bạc140 Huy hiệu đồng14 gold badges75 silver badges140 bronze badges
1
Lớp giả CSS ____7 đại diện cho một yếu tố [chẳng hạn như đầu vào biểu mẫu] đã nhận được tiêu điểm. Nó thường được kích hoạt khi người dùng nhấp hoặc chạm vào một phần tử hoặc chọn nó bằng phím Tab của bàn phím. Lưu ý: Lớp giả này chỉ áp dụng cho chính phần tử tập trung. Sử dụng :focus
CSS pseudo-class represents an element [such as a form input] that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.Thử nó
5 Nếu bạn muốn chọn một phần tử chứa phần tử tập trung. This pseudo-class applies only to the focused element itself. Use
5 if you want to select an element that contains a focused element.
Cú pháp
Ví dụ
HTML
CSS
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
Kết quả
Mối quan tâm tiếp cận
Hãy chắc chắn rằng chỉ báo lấy nét trực quan có thể được nhìn thấy bởi những người có tầm nhìn thấp. Điều này cũng có lợi cho bất cứ ai sử dụng màn hình trong một không gian sáng rực [như bên ngoài dưới ánh mặt trời]. WCAG 2.1 SC 1.4.11 Độ tương phản phi văn bản yêu cầu chỉ báo lấy nét trực quan ít nhất là 3 đến 1.
- Các chỉ số lấy nét trực quan có thể truy cập: Cung cấp cho trang web của bạn một số trọng tâm! Mẹo thiết kế các chỉ số lấy nét hữu ích và có thể sử dụng
6
Không bao giờ chỉ xóa phác thảo tiêu điểm [chỉ báo lấy nét có thể nhìn thấy] mà không thay thế nó bằng một phác thảo tiêu điểm sẽ vượt qua tương phản không text WCAG 2.1 SC 1.4.11.
- Mẹo nhanh: Không bao giờ xóa các phác thảo CSS
Thông số kỹ thuật
HTML Standard # Selector-Focus # selector-focus |
Bộ chọn cấp độ 4 # Focus Pseudo # focus-pseudo |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt