Hướng dẫn how do you focus a button in css? - làm thế nào để bạn tập trung một nút trong css?

Question

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

Nội dung chính Show

Kết quả
Mối quan tâm tiếp cận
6
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Nút tập trung có nghĩa là gì?
Một nút có thể tập trung?
Bạn có thể tập trung vào một div?

Đâ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: http://kodeweave.sourceforge.net/editor/#9838274385F08A1729905C5274944518 http://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

3

Mẹ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

Hướng dẫn how do you focus a button in css? - làm thế nào để bạn tập trung một nút trong css?

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.: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ó

Lưu ý: Lớp giả này chỉ áp dụng cho chính phần tử tập trung. Sử dụng

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

<div><input class="red-input" value="I'll be red when focused." />div>
<div><input class="blue-input" value="I'll be blue when focused." />div>

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

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

Sự chỉ rõ
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

Xem thêm

Nút tập trung có nghĩa là gì?

: Focus là khi một phần tử có thể chấp nhận đầu vào - con trỏ trong hộp đầu vào hoặc liên kết đã được lập bảng.: Hoạt động là khi một phần tử đang được người dùng kích hoạt - thời gian giữa khi người dùng nhấn nút chuột và sau đó giải phóng nó.when an element is able to accept input - the cursor in a input box or a link that has been tabbed to. :active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it.

Một nút có thể tập trung?

Thuộc tính lấy nét tự động là một thuộc tính boolean.Khi có mặt, nó chỉ định rằng một nút sẽ tự động lấy lấy nét khi tải trang.a button should automatically get focus when the page loads.

Bạn có thể tập trung vào một div?

Trọng tâm thường được loại bỏ khỏi phần tử bằng cách đưa một yếu tố khác vào tiêu điểm.Không phải tất cả các yếu tố đều có thể tập trung.Các tiêu đề, đoạn văn, div và nhiều yếu tố trang khác không thể nhận được tiêu điểm.Các yếu tố có thể tập trung thường là các yếu tố mà người dùng có thể tương tác, chẳng hạn như liên kết và điều khiển biểu mẫu.Headings, paragraphs, divs, and various other page elements cannot receive focus. Elements that are focusable are normally ones that users can interact with, such as links and form controls.

programming css Focus-visible Focus CSS Auto focus input Focus To-Do Active CSS Focus La gì Button focus style

Hướng dẫn how do you focus a button in css? - làm thế nào để bạn tập trung một nút trong css?

Thử nó

Cú pháp

Ví dụ

HTML

CSS

Kết quả

Mối quan tâm tiếp cận

6

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Nút tập trung có nghĩa là gì?

Một nút có thể tập trung?

Bạn có thể tập trung vào một div?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội