CodePen

bookmark_border Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Chèn một phần tử vào thứ tự thẻ

Chèn một phần tử vào thứ tự thẻ tự nhiên bằng tabindex="0". Ví dụ:

<div tabindex="0">Focus me with the TAB key</div>

Để lấy tiêu điểm vào một phần tử, hãy nhấn phím Tab hoặc gọi phương thức focus() của phần tử đó.

Xoá một phần tử khỏi thứ tự thẻ

Xoá một phần tử bằng tabindex="-1". Ví dụ:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Thao tác này sẽ xoá một phần tử khỏi thứ tự thẻ tự nhiên, nhưng bạn vẫn có thể đặt tiêu điểm vào phần tử đó bằng cách gọi phương thức focus() của phần tử đó.

Xin lưu ý rằng việc áp dụng tabindex="-1" cho một phần tử không ảnh hưởng đến các phần tử con của phần tử đó; nếu các phần tử con đó nằm trong thứ tự thẻ theo tự nhiên hoặc do giá trị tabindex, thì các phần tử con đó sẽ vẫn nằm trong thứ tự thẻ. Để xoá một phần tử và tất cả phần tử con của phần tử đó khỏi thứ tự thẻ, hãy cân nhắc sử dụng polyfill inert của WICG. Tiện ích bổ sung này mô phỏng hành vi của thuộc tính inert được đề xuất, ngăn các công nghệ hỗ trợ chọn hoặc đọc các phần tử.

Hãy bắt đầu!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Lưu ý việc sử dụng steps(var(--count)) để có được hiệu ứng phù hợp ✨