Skip to main content

B.6.3. Focus

Pada chapter ini kita akan membahas tentang :focus. Pseudo-class ini diterapkan pada elemen ketika elemen tersebut menerima fokus. Ini biasanya terjadi saat pengguna mengklik elemen atau menggunakan keyboard (seperti menekan tombol Tab).

Oke teman-teman, contohnya kita akan punya kode seperti di bawah ini:

<input type="text" placeholder="johndoe" class="username" />

Kita mempunyai sebuah <input> yang kita beri class username. Lalu kita berikan style seperti padding y sebesar 0.75rem dan x sebesar 1rem agar terdapat jarak antara teks dan border.

border-radius sebesar 8px agar masing-masing sisi dari <input> tidak terlalu lancip. outline nya kita hilangkan, outline adalah sebuah garis yang mengelilingi input dan berada setelah border untuk melihatnya teman-teman bisa komentari pada properti outline dan coba arahkan kursor nya kedalam <input> lalu klik kanan.

Bisa teman-teman lihat garis berwarna biru? nah itu adalah outline. Setelah kita jadikan outline:none; maka hasilnya akan menjadi seperti:

Sekarang, kita ingin menambahkan interaksi pada <input> di atas dengan menggunakan pseude class :focus. Ketika kursor memasuki <input> maka kita akan coba merubah warna garis tepi nya menjadi pink dengan border:1px solid pink; maka teman-teman bisa menambahkan kode seperti di bawah ini.

.username {
  /*.......*/
}

.username:focus {
  border: 1px solid pink;
}

Maka hasilnya akan terlihat seperti preview di bawah ini.

Nah jadi itu contoh penggunaan pseude class :focus pada elemen <input>. Teman-teman bisa menggunakan ini di elemen lain seperti <button> dan <textarea>.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.6-pseude-class/B.6.3-focus