:focus
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
:focus là lớp giả (pseudo-class) trong CSS, đại diện cho một phần tử (chẳng hạn như ô nhập liệu trong biểu mẫu) đang nhận focus. 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 trên bàn phím.
Try it
label {
display: block;
margin-top: 1em;
}
input:focus {
background-color: lightblue;
}
select:focus {
background-color: ivory;
}
<form>
<p>Which flavor would you like to order?</p>
<label>Full Name: <input name="firstName" type="text" /></label>
<label
>Flavor:
<select name="flavor">
<option>Cherry</option>
<option>Green Tea</option>
<option>Moose Tracks</option>
<option>Mint Chip</option>
</select>
</label>
</form>
Note:
Lớp giả này chỉ áp dụng cho chính phần tử đang được focus. Sử dụng :focus-within nếu bạn muốn chọn một phần tử chứa một phần tử đang được focus.
Cú pháp
:focus {
/* ... */
}
Khả năng tiếp cận
Hãy đảm bảo rằng chỉ báo focus trực quan có thể nhìn thấy được bởi người có thị lực kém. Điều này cũng có lợi cho bất kỳ ai sử dụng màn hình trong không gian sáng (chẳng hạn như ngoài trời dưới ánh nắng mặt trời). WCAG 2.1 SC 1.4.11 Non-Text Contrast yêu cầu chỉ báo focus trực quan phải có tỷ lệ tương phản ít nhất là 3:1.
- Chỉ báo focus trực quan có thể tiếp cận: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
:focus { outline: none; }
Không bao giờ chỉ đơn giản là xóa viền focus (chỉ báo focus trực quan) mà không thay thế bằng một viền focus đáp ứng WCAG 2.1 SC 1.4.11 Non-Text Contrast.
- Mẹo nhanh: Never remove CSS outlines
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ả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # selector-focus |
| Selectors Level 4 # focus-pseudo |