CSS : Bộ chọn tiêu điểm
Thí dụ
Chọn và tạo kiểu cho một trường nhập liệu khi nó được lấy tiêu điểm:
input:focus
{
background-color: yellow;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Bộ :focus
chọn được sử dụng để chọn phần tử có tiêu điểm.
Mẹo: Bộ chọn: tiêu điểm được phép trên các phần tử chấp nhận các sự kiện bàn phím hoặc các đầu vào của người dùng khác.
Phiên bản: | CSS2 |
---|
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ bộ chọn.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Cú pháp CSS
:focus {
css declarations;
}
Các ví dụ khác
Thí dụ
Khi <input type = "text"> được lấy tiêu điểm, hãy dần dần thay đổi chiều rộng từ 100px thành 250px:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Các trang liên quan
Hướng dẫn CSS: Các lớp giả CSS