Hướng dẫn mobile focus css - tiêu điểm di động 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ụ

- 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ử được

: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

Trong một số trường hợp chúng ta muốn thay đổi style của class parent khi ta

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

Ta sẽ làm điều đó như sau:

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

Phần html:

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

input:focus {
	background: #ff0000;
}

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

input:focus {
	background: #ff0000;
}

.container:focus-within {
    padding: 40px;
}

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

input:focus {
	background: #ff0000;
}

input:focus {
	background: #ff0000;
}

input:focus {
	background: #ff0000;
}

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

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

input:focus {
	background: #ff0000;
}

Chúc các bạn học tốt. Peace 😄

About Me@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 🎉😄.

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 🎉😄.