- Trang chủ
- Tham khảo
- CSS
- :focus
Định nghĩa và sử dụng
":focus" thành phần sẽ focus khi được chọn.
Cấu trúc
tag:focus {
property: value;
}Ví dụ
HTML viết:
Hiển thị trình duyệt khi chưa có CSS:
CSS viết:
input:focus {
background: #ff0000;
}Hiển thị trình duyệt khi đã có CSS:
Click vào sẽ thấy hiệu ứng.
Trình duyệt hỗ trợ
":focus" được hỗ trợ trong đa số các trình duyệt.
Ghi chú:
Không hỗ trợ cho trình duyệt IE6, IE7.
Cần khai báo cho trình
duyệt IE8.
1] Bộ chọn :focus trong CSS
- Bộ chọn :focus dùng để chọn tất cả các phần tử INPUT, TEXTAREA, SELECT đang được người dùng truy cập vào [truy cập bằng cách click chuột vào nó hoặc bấm phím Tab để di chuyển vào nó]
2] Cách sử dụng bộ chọn :focus trong CSS
- Để sử dụng bộ chọn :focus, ta dùng cú pháp như sau:
:focus{
các khai báo định dạng CSS
}3] Một số ví dụ
- Chỉnh nền màu vàng cho các phần tử đang được người dùng truy cập vào
:focus{
background-color:yellow;
}Xem ví dụ
- Chỉnh nền màu vàng cho các phần tử đang được người dùng truy cập vào
textarea:focus{
background-color:yellow;
}Xem ví dụ
Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!
:focus-within css
:focus-within trong css khác với
:focus. :focus đại diện cho một element chẳng hạn như phần tử được focus vào. Ví dụ nó sẽ được kích hoạt khi người dùng click vào một phần tử hoặc sử dụng phím Tab của bàn phím.
Trong một số trường hợp chúng ta muốn thay đổi style của class parent khi ta focus vào 1 phần tử bên trong parent thì làm thế nào? Câu trả lời là chúng ta thực hiện điều này bằng :focus-within. Sau đây mình có một ví dụ nhỏ giúp các bạn hiểu về pseudo-class này.
Ở ví dụ
trên các bạn để ý khi focus vào form input border ở class parent đã được đổi màu. Điều này giúp người dùng biết mình đang ở input nào ^^.
Ta sẽ làm điều đó như sau:
Phần html:
Your email
Your Password
.form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}Các bạn có thể thấy phần tử input đang ở trong phần tử có class .form. Khi kích hoạt focus của input thì ta sử dụng :focus-within cho .form và thay border-color.
Có thể hiểu rằng khi một phần tử bên trong parent được
focus chúng ta có thể sử dụng focus-within cho các phần tử chứa nó.
Để hiểu hơn thì ví dụ trên mình đã thay padding cho container bằng cách thêm focus-within cho phần tử này. Khi input trong phần tử này focus ta đổi padding cho container ^^.
.container:focus-within {
padding: 40px;
}Đơn giản và hiệu quả đúng không 😀 Thay vì làm điều tương tự bằng cách sử dụng Javascript/Jquery thì ta đơn giản chỉ cần focus-within.
Như vậy là mình đã hướng dẫn các bạn chúng ta sử dụng focus-within. Hy vọng các
bạn có thể hiểu và sử dụng nó cho trang web của mình khi cần ^^.
Chúc các bạn học tốt. Peace 😄
About Me
Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.
Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.