Hướng dẫn focus-within trong css - focus-trong trong css

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:

<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);
}

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

Khi chúng ta click vào phần

  

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

Browser Support

All rights reserved