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!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 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
.form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
0. Sau đây mình có một ví dụ nhỏ giúp các bạn hiểu về .form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
1 này.Ở ví dụ trên các bạn để ý khi focus
vào form input
.form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
3 ở 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 {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
4. Khi kích hoạt focus
của input thì ta sử dụng .form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
0 cho .form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
4 và thay .form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
8.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
.container:focus-within {
padding: 40px;
}
0 cho các phần tử chứa nó.Để hiểu hơn thì ví dụ trên mình đã thay padding cho
.container:focus-within {
padding: 40px;
}
1 bằng cách thêm .container:focus-within {
padding: 40px;
}
0 cho phần tử này. Khi input trong phần tử này focus
ta đổi padding cho .container:focus-within {
padding: 40px;
}
1 ^^..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
.container:focus-within {
padding: 40px;
}
0.Như vậy là mình đã hướng dẫn các bạn chúng ta sử dụng
.container:focus-within {
padding: 40px;
}
0. 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 😄
Đã đăng vào thg 1 21, 2019 8:32 SA 1 phút đọc 1 phút đọc
Chắc hẳn các bạn đã quen với trạng thái
.container:focus-within {
padding: 40px;
}
7 rồi phải không, thế còn .form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
0 bạn hiểu thế nào về trạng thái này?focus-within là gì?
.form {
padding-left: 10px;
border-left: 3px solid rgb[224, 224, 224];
}
.form:focus-within {
border-color: rgb[56, 142, 255];
}
0 là một pseudo selector đại diện cho thành phần nhận focus hoặc chứa một thành phần nhận focus. Nói cách khác, nó sẽ trỏ đến một thành phần mà chính thành phần ấy chứa mọi thằng con mà có .container:focus-within {
padding: 40px;
}
7.Cách hoạt động của focus-within
Hãy xem qua ví dụ dưới đây:
HTML
Full name:
Age:
Address:
CSS
form:focus-within {
background: yellow;
}
Khi click vào các
Full name:
Age:
Address:
1 bên trong
Full name:
Age:
Address:
2, thì background của form sẽ đổi sang màu vàng. Vì
Full name:
Age:
Address:
1 là các thuộc tính con của
Full name:
Age:
Address:
2 và đều có thuộc tính focus.Hãy xét tới một ví dụ khác, giả sử bạn muốn có một thẻ
Full name:
Age:
Address:
1 nằm bên trong thẻ
Full name:
Age:
Address:
6 HTML
CSS
.inputholder {
....
&:focus-within {
border: 1px solid blue;
}
}
Khi click vào các
Full name:
Age:
Address:
1 bên trong
Full name:
Age:
Address:
2, thì background của form sẽ đổi sang màu vàng. Vì
Full name:
Age:
Address:
1 là các thuộc tính con của
Full name:
Age:
Address:
2 và đều có thuộc tính focus.Hãy xét tới một ví dụ khác, giả sử bạn muốn có một thẻ
Full name:
Age:
Address:
1 nằm bên trong thẻ
Full name:
Age:
Address:
6 HTML
Full name:
Age:
Address:
Full name:
Age:
Address:
Full name:
Age:
Address:
1 thì style của thẻ div bên ngoài cụ thể là div
Full name:
Age:
Address:
8 sẽ thay đổi style, cách này khiến cho chúng ta có thể style cho những input nào có style phức tạp, thì chúng ta có thể thay thế bằng 1 thẻ div thay vì style trên thẻ inputBrowser Support
All rights reserved