Pseudo-class :focus-visible CSS

Definisi dan penggunaan

CSS :focus-visible Pseudo-class digunakan untuk menerapkan gaya fokus hanya saat diambil fokus melalui keyboard, bukan saat diambil fokus melalui mouse.

Ini dapat digunakan dengan :focus Gunakan bersama-sama untuk membuat gaya fokus yang berbeda untuk fokus keyboard dan fokus mouse/touch.

Contoh

Pilih dan atur gaya tombol yang diambil melalui tombol Tab keyboard untuk mengambil fokus:

button:focus-visible {
  outline: 2px solid red;
}

Coba sendiri

CSS Syntax

:focus-visible {
  pernyataan css;
}

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung pseudo-class ini penuh.

Halaman yang berhubungan

Panduan:Pseudo-kelas CSS

Referensi:Pseudo-kelas :focus CSS