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

• 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.
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ó):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, 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ụ

• 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.
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ó):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, 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ụ

- Chỉnh nền màu vàng cho các phần tử đang được người dùng truy cập vàoad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

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 trong css khác với :focus. :focus đại diện cho một element chẳng hạn như phần tử

5 được

6 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.

: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ử

5 được

6 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.

Ở ví dụ trên các bạn để ý khi

6 vào form input

input:focus {
	background: #ff0000;
}

1 ở 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:

2

3

Các bạn có thể thấy phần tử input đang ở trong phần tử có class

input:focus {
	background: #ff0000;
}

2. Khi kích hoạt

6 của input thì ta sử dụng

8 cho

input:focus {
	background: #ff0000;
}

2 và thay

input:focus {
	background: #ff0000;
}

6.

Có thể hiểu rằng khi một phần tử bên trong parent được

6 chúng ta có thể sử dụng

input:focus {
	background: #ff0000;
}

8 cho các phần tử chứa nó.

Để hiểu hơn thì ví dụ trên mình đã thay padding cho

input:focus {
	background: #ff0000;
}

9 bằng cách thêm

input:focus {
	background: #ff0000;
}

8 cho phần tử này. Khi input trong phần tử này

6 ta đổi padding cho

input:focus {
	background: #ff0000;
}

9 ^^.

4

Đơ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

input:focus {
	background: #ff0000;
}

8.

Như vậy là mình đã hướng dẫn các bạn chúng ta sử dụng

input:focus {
	background: #ff0000;
}

8. 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 🎉😄.@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 😁😁.