: fokus - Trik CSS

Anonim

Kelas :focuspseudo di CSS digunakan untuk menata elemen yang saat ini ditargetkan oleh keyboard, atau diaktifkan oleh mouse. Berikut ini contohnya:

textarea:focus ( background: pink; )

Setiap elemen (paling sering s dan s) berada dalam "fokus" saat dipilih dan siap untuk memasukkan teks (seperti saat kursor berkedip). Pengguna mouse dapat mengkliknya (atau yang terkait label) untuk fokus, dan pengguna keyboard dapat TAB ke dalamnya.

"Tabbing"

penggunaan lain dari :focuskelas semu adalah "tabbing" melalui elemen. Banyak browser memiliki status fokus default untuk pemilihan tab, yang berupa garis putus-putus. Cukup mudah untuk melepasnya, tetapi pastikan untuk menggantinya dengan alternatif yang sesuai jika Anda melakukannya.

s, s, s, dan textareas semua memiliki :focus negara secara default, tetapi Anda dapat memberikan keadaan fokus untuk setiap elemen dalam HTML. Baik atribut contenteditable dan tabindexberfungsi untuk ini, seperti dalam contoh ini:

Terkait

Artikel pada 12 Mei 2017

Kelas Pseudo `: fokus-dalam`

Chris Coyier

Dukungan Browser

Semua browser mendukung penggunaan dasar :focus.