Đầu vào: tiêu điểm css

Thử nó

Ghi chú. Lớp giả này chỉ áp dụng cho chính phần tử được tập trung. Sử dụng

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

cú pháp

:focus

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 về khả năng tiếp cận

Đảm bảo những người có thị lực kém có thể nhìn thấy chỉ báo tiêu điểm trực quan. Điều này cũng sẽ có lợi cho bất kỳ ai sử dụng màn hình trong không gian có ánh sáng rực rỡ (như ngoài trời nắng). WCAG 2. 1 SC 1. 4. 11 Độ tương phản phi văn bản yêu cầu chỉ báo tiêu điểm trực quan ít nhất là 3 trên 1

• Các chỉ báo tập trung trực quan có thể truy cập. Cung cấp cho trang web của bạn một số tiêu điểm. Mẹo để thiết kế các chỉ báo tiêu điểm hữu ích và có thể sử dụng được

.red-input:focus { background: yellow; color: red; } .blue-input:focus { background: yellow; color: blue; } 1

Không bao giờ chỉ xóa đường viền tiêu điểm (chỉ báo tiêu điểm có thể nhìn thấy) mà không thay thế nó bằng đường viền tiêu điểm sẽ vượt qua WCAG 2. 1 SC 1. 4. 11 Độ tương phản phi văn bản

Vui lòng sử dụng cú pháp sau để loại bỏ đường viền của hộp văn bản và xóa đường viền được tô sáng của kiểu trình duyệtlấy nét trong css⚠️ Cảnh báo khả năng tiếp cận

Vui lòng sử dụng cú pháp sau để loại bỏ đường viền của hộp văn bản và xóa đường viền được tô sáng của kiểu trình duyệt

11. 3K14 Huy hiệu vàng61 Huy hiệu bạc91 Huy hiệu Đồng trong css khác với. tiêu điểm. . tiêu điểm đại diện cho một phần tử không có giới hạn như phần tử

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

Đã trả lời ngày 8 tháng 5 năm 2013 lúc 8. 55

tabishtabish

1. 48416 huy hiệu bạc13 huy hiệu đồng

bộ

<div class="container">
  <div class="form">
    <label for="email">Your emaillabel>
    <input type="email" id="email" />
  div>
  <div class="form">
    <label for="password">Your Passwordlabel>
    <input type="password" id="password" />
  div>
div>

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

". Quan trọng" chỉ là trong trường hợp. Nó không cần thiết. [Và bây giờ nó đã bị mất biến. Cấm. ]

Đã trả lời ngày 5 tháng 9 năm 2013 lúc 15. 28

maddmadd

.container:focus-within {
    padding: 40px;
}

3292 Huy hiệu bạc8 Huy hiệu Đồng

Tôi phát hiện ra rằng bạn cũng có thể sử dụng

Bgilham

johannchopin

12. Huy hiệu vàng 5k946 huy hiệu bạc93 huy hiệu đồng9 huy hiệu vàng46 huy hiệu bạc93 huy hiệu đồng

đã hỏi ngày 3 tháng 8 năm 2010 lúc 13. 49 3 tháng 8, 2010 lúc 13. 49

Joey MoraniJoey Morani Joey Morani

24. Huy hiệu vàng 1k3281 huy hiệu bạc130 huy hiệu đồng32 huy hiệu vàng81 huy hiệu bạc130 huy hiệu đồng

5

Đường viền này được sử dụng để chỉ ra rằng phần tử được đặt tiêu điểm (i. e. bạn có thể nhập đầu vào hoặc nhấn nút bằng Enter). Tuy nhiên, bạn có thể xóa nó bằng thuộc tính phác thảo

Bạn có thể muốn thêm một số cách khác để người dùng biết phần tử nào có tiêu điểm bàn phím mặc dù về khả năng sử dụng

Chrome cũng sẽ áp dụng tô sáng cho các thành phần khác, chẳng hạn như DIV được sử dụng làm phương thức. Để ngăn phần tô sáng trên những phần tử đó và tất cả các phần tử khác, bạn có thể làm

*:focus {
    outline: none;
}

⚠️ Cảnh báo khả năng tiếp cận

Xin lưu ý rằng việc xóa đường viền khỏi đầu vào là một phương pháp không phù hợp với khả năng truy cập. Người dùng sử dụng trình đọc màn hình sẽ không thể thấy vị trí con trỏ của họ được tập trung vào. Thêm thông tin tại a11yproject

đã trả lời ngày 3 tháng 8 năm 2010 lúc 13. 52 3 tháng 8, 2010 lúc 13. 52

9

Câu trả lời hiện tại không phù hợp với tôi với Bootstrap 3. 1. 1. Đây là những gì tôi phải ghi đè

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

johannchopin

12. Huy hiệu vàng 5k946 huy hiệu bạc93 huy hiệu đồng9 huy hiệu vàng46 huy hiệu bạc93 huy hiệu đồng

đã hỏi ngày 3 tháng 8 năm 2010 lúc 13. 49 21/02/2014 lúc 3. 43

Joey MoraniJoey Morani gwintrob

24. Huy hiệu vàng 1k3281 huy hiệu bạc130 huy hiệu đồng1 huy hiệu vàng17 huy hiệu bạc14 huy hiệu đồng

8

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

Đường viền này được sử dụng để chỉ ra rằng phần tử được đặt tiêu điểm (i. e. bạn có thể nhập đầu vào hoặc nhấn nút bằng Enter). Tuy nhiên, bạn có thể xóa nó bằng thuộc tính phác thảo

johannchopin

12. Huy hiệu vàng 5k946 huy hiệu bạc93 huy hiệu đồng9 huy hiệu vàng46 huy hiệu bạc93 huy hiệu đồng

đã trả lời ngày 3 tháng 8 năm 2010 lúc 13. 52 3 tháng 8, 2010 lúc 13. 52

azram19azram19 azram19

Câu trả lời hiện tại không phù hợp với tôi với Bootstrap 3. 1. 1. Đây là những gì tôi phải ghi đè. 1 huy hiệu vàng9 huy hiệu bạc6 huy hiệu đồng

4

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

johannchopin

đã trả lời 21 Tháng hai 2014 tại 3. 43 8 tháng 10, 2014 lúc 7. 26

gwintrobgwintrob Kailas

3.0451 huy hiệu vàng17 huy hiệu bạc14 huy hiệu đồng3 huy hiệu vàng45 huy hiệu bạc63 huy hiệu đồng

6

Điều này sẽ làm. Đường viền màu cam sẽ không hiển thị nữa.
Tôi đã sử dụng.

.container:focus-within {
    padding: 40px;
}

1.7071 huy hiệu vàng9 huy hiệu bạc6 huy hiệu đồng Ngày 3 tháng 8 năm 2010 lúc 13. 51

Joey MoraniJoey Morani Joey Morani

24. Huy hiệu vàng 1k3281 huy hiệu bạc130 huy hiệu đồng32 huy hiệu vàng81 huy hiệu bạc130 huy hiệu đồng

2

Đường viền này được sử dụng để chỉ ra rằng phần tử được đặt tiêu điểm (i. e. bạn có thể nhập đầu vào hoặc nhấn nút bằng Enter). Tuy nhiên, bạn có thể xóa nó bằng thuộc tính phác thảo

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

johannchopin

12. Huy hiệu vàng 5k946 huy hiệu bạc93 huy hiệu đồng9 huy hiệu vàng46 huy hiệu bạc93 huy hiệu đồng

đã hỏi ngày 3 tháng 8 năm 2010 lúc 13. 49 10/10/2012 lúc 20. 43

Joey MoraniJoey Morani nonamehere

24. Huy hiệu vàng 1k3281 huy hiệu bạc130 huy hiệu đồng3 huy hiệu bạc2 huy hiệu đồng

Đường viền này được sử dụng để chỉ ra rằng phần tử được đặt tiêu điểm (i. e. bạn có thể nhập đầu vào hoặc nhấn nút bằng Enter). Tuy nhiên, bạn có thể xóa nó bằng thuộc tính phác thảo

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

Bạn có thể muốn thêm một số cách khác để người dùng biết phần tử nào có tiêu điểm bàn phím mặc dù về khả năng sử dụng

johannchopin

12. Huy hiệu vàng 5k946 huy hiệu bạc93 huy hiệu đồng9 huy hiệu vàng46 huy hiệu bạc93 huy hiệu đồng

đã hỏi ngày 3 tháng 8 năm 2010 lúc 13. 49 23 Tháng Năm, 2013 lúc 9. 55

2

Joey MoraniJoey Morani

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

daniel__

24. Huy hiệu vàng 1k3281 huy hiệu bạc130 huy hiệu đồng14 huy hiệu vàng61 huy hiệu bạc91 huy hiệu đồng

Đường viền này được sử dụng để chỉ ra rằng phần tử được lấy tiêu điểm (i. e. bạn có thể nhập đầu vào hoặc nhấn nút bằng Enter). Tuy nhiên, bạn có thể xóa nó bằng thuộc tính phác thảo. 8 tháng 5 năm 2013 lúc 8. 55

Bạn có thể muốn thêm một số cách khác để người dùng biết phần tử nào có tiêu điểm bàn phím để tiện sử dụng. Tabish

Chrome cũng sẽ áp dụng tô sáng cho các thành phần khác, chẳng hạn như DIV được sử dụng làm phương thức. Để ngăn phần tô sáng trên những phần tử đó và tất cả các phần tử khác, bạn có thể làm. 16 huy hiệu bạc13 huy hiệu đồng

1

⚠️ Cảnh báo khả năng tiếp cận

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

Xin lưu ý rằng việc xóa đường viền khỏi đầu vào là một phương pháp không phù hợp với khả năng truy cập. Người dùng sử dụng trình đọc màn hình sẽ không thể thấy vị trí con trỏ của họ được tập trung vào. Thêm thông tin tại a11yproject

đã trả lời ngày 3 tháng 8 năm 2010 lúc 13. 52 Ngày 5 tháng 9 năm 2013 lúc 15. 28

Câu trả lời hiện tại không phù hợp với tôi với Bootstrap 3. 1. 1. Đây là những gì tôi phải ghi đè. điên

johannchopin 2 huy hiệu bạc8 huy hiệu đồng

2

đã trả lời ngày 21 tháng 2 năm 2014 lúc 3. 43

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

gwintrobgwintrob

3.0451 huy hiệu vàng17 huy hiệu bạc14 huy hiệu đồng1 huy hiệu vàng23 huy hiệu bạc39 huy hiệu đồng

Điều này sẽ làm. Đường viền màu cam sẽ không hiển thị nữa. Ngày 6 tháng 5 năm 2015 lúc 12. 51

1.7071 huy hiệu vàng9 huy hiệu bạc6 huy hiệu đồng Refilon

Làm việc tốt cho tôi. Muốn sửa nó trong chính html. . )1 huy hiệu vàng25 huy hiệu bạc46 huy hiệu đồng

1

Điều này chắc chắn sẽ hoạt động. Đường viền màu cam sẽ không hiển thị nữa. phổ biến cho tất cả các thẻ