: fokus - Trik CSS

Anonim

The :focuskelas pseudo dalam CSS digunakan untuk menggayakan elemen yang sedang disasarkan oleh papan kekunci, atau diaktifkan oleh tetikus. Berikut adalah contoh:

textarea:focus ( background: pink; )

Mana-mana elemen (paling sering s dan s) berada dalam "fokus" ketika mereka dipilih dan siap memasukkan teks (seperti ketika kursor berkedip). Pengguna tetikus dapat mengklik mereka (atau yang berkaitan label) untuk memfokuskan, dan pengguna papan kekunci dapat memasukkannya ke dalamnya.

"Tabbing"

penggunaan :focuskelas pseudo adalah "tabbing" melalui elemen. Banyak penyemak imbas mempunyai keadaan fokus lalai untuk pemilihan tab, yang merupakan garis besar putus-putus. Ia agak mudah dikeluarkan, tetapi pastikan untuk menggantinya dengan alternatif yang sesuai jika anda melakukannya.

s, s, s, dan textareas semua mempunyai :focus negeri secara lalai, tetapi anda boleh memberi keadaan fokus kepada mana-mana elemen dalam HTML. Kedua-dua contenteditable dan tabindex atribut berfungsi untuk ini, seperti dalam contoh ini:

Berkaitan

Artikel pada 12 Mei 2017

Kelas Pseudo `: focus-inside`

Chris Coyier

Sokongan Penyemak Imbas

Semua penyemak imbas menyokong penggunaan asas :focus.