Ketika elemen HTML 'terfokus' (saat ini dipilih / dimasukkan ke dalam tab), banyak browser (setidaknya Safari dan Chrome) akan menempatkan batas biru di sekitarnya.
Untuk tata letak yang sedang saya kerjakan, ini mengganggu dan tidak terlihat benar.
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox sepertinya tidak melakukan ini, atau setidaknya, akan membiarkan saya mengendalikannya dengan:
border: x;
Jika seseorang dapat memberi tahu saya bagaimana kinerja IE, saya akan penasaran.
Mendapatkan Safari untuk menghapus sedikit suar ini akan menyenangkan.
input:focus, textarea:focus {outline: none;}
select:focus {outline:none;}
<button>
tag, yang digunakan oleh jQuery UI dan Twitter Bootstrap, di antara hal-hal lain, jadi saya akan menambahbutton: focus
daftar untuk kelengkapannya.button, button:focus { outline:none; }
Untuk menghapusnya dari semua input
sumber
Ini adalah utas lama, tetapi untuk referensi, penting untuk dicatat bahwa menonaktifkan kerangka elemen input tidak disarankan karena menghambat aksesibilitas.
Properti outline ada karena suatu alasan - memberikan pengguna dengan indikasi yang jelas tentang fokus keyboard. Untuk bacaan lebih lanjut dan sumber tambahan tentang subjek ini, lihat http://outlinenone.com/
sumber
Only thing is that you won't be able to see the focus(outline focus) on it
- dan itulah poin saya. Menghapus garis besar menonaktifkan indikasi visual dari peristiwa fokus, bukan peristiwa yang sebenarnya. Menghapus indikasi visual berarti Anda mempersulit penyandang disabilitas yang bergantung pada indikasi itu.outline:none;
) tanpa mempertimbangkan implikasinya. Hanya karena sesuatu itu mudah dan menghemat waktu, bukan berarti itu latihan terbaik :)Ini adalah masalah umum.
Garis besar default yang dirender oleh browser adalah jelek.
Lihat ini misalnya:
Tampilkan cuplikan kode
"Perbaikan" paling umum yang paling direkomendasikan adalah
outline:none
- yang jika digunakan secara tidak benar - adalah bencana untuk aksesibilitas.Jadi ... apa gunanya garis besar itu?
Ada situs web yang sangat kering yang saya temukan yang menjelaskan semuanya dengan baik.
Ok, mari kita coba contoh yang sama seperti di atas, sekarang gunakan
TAB
tombol untuk menavigasi.Tampilkan cuplikan kode
Perhatikan bagaimana Anda bisa tahu di mana fokusnya bahkan tanpa mengklik input?
Sekarang, mari kita coba
outline:none
pada kepercayaan kami<input>
Jadi, sekali lagi, gunakan
TAB
tombol untuk bernavigasi setelah mengklik teks dan lihat apa yang terjadi.Tampilkan cuplikan kode
Lihat bagaimana lebih sulit untuk mencari tahu di mana fokusnya? Satu-satunya tanda jitu adalah kursor berkedip. Contoh saya di atas terlalu sederhana. Dalam situasi dunia nyata, Anda tidak hanya memiliki satu elemen di halaman. Sesuatu yang lebih seperti ini.
Tampilkan cuplikan kode
Sekarang bandingkan dengan templat yang sama jika kita mempertahankan garis besarnya:
Tampilkan cuplikan kode
Jadi kami telah menetapkan yang berikut ini
Jadi apa jawabannya?
Hapus outline jelek dan tambahkan isyarat visual Anda sendiri untuk menunjukkan fokus.
Inilah contoh yang sangat sederhana tentang apa yang saya maksud.
Saya menghapus garis besar dan menambahkan batas bawah pada : fokus dan : aktif . Saya juga menghapus batas default di bagian atas, kiri dan kanan dengan mengaturnya menjadi transparan pada : fokus dan : aktif (preferensi pribadi)
Tampilkan cuplikan kode
Jadi, kami mencoba pendekatan di atas dengan contoh "dunia nyata" dari sebelumnya:
Tampilkan cuplikan kode
Ini dapat diperluas lebih lanjut dengan menggunakan perpustakaan eksternal yang dibangun di atas gagasan memodifikasi "garis besar" sebagai lawan menghapus sepenuhnya seperti Materialize
Anda bisa berakhir dengan sesuatu yang tidak jelek dan bekerja dengan sedikit usaha
Tampilkan cuplikan kode
sumber
Ini membingungkan saya selama beberapa waktu sampai saya menemukan garis itu bukan perbatasan atau garis besar, itu adalah bayangan. Jadi untuk menghapusnya saya harus menggunakan ini:
sumber
Anda dapat menggunakan CSS untuk menonaktifkannya! Ini adalah kode yang saya gunakan untuk menonaktifkan batas biru:
Ini akan menghapus batas biru!
Ini adalah contoh kerja: JSfiddle.net
Semoga ini bisa membantu!
sumber
Menghapus semua gaya fokus buruk untuk aksesibilitas dan pengguna papan ketik secara umum. Tapi garis besar jelek dan memberikan gaya fokus khusus untuk setiap elemen interaktif bisa menjadi rasa sakit yang nyata.
Jadi kompromi terbaik yang saya temukan adalah menunjukkan gaya garis besar hanya ketika kami mendeteksi bahwa pengguna menggunakan keyboard untuk bernavigasi. Pada dasarnya, jika pengguna menekan TAB, kami menunjukkan garis besar dan jika dia menggunakan mouse, kami menyembunyikannya.
Itu tidak menghentikan Anda dari menulis gaya fokus khusus untuk beberapa elemen tetapi setidaknya itu memberikan standar yang baik.
Beginilah cara saya melakukannya:
sumber
click
pendengar adalah sentuhan yang bagus.Saya mencoba semua jawaban dan saya masih belum bisa mengerjakannya di Mobile , sampai saya menemukannya
-webkit-tap-highlight-color
.Jadi, yang berhasil bagi saya adalah ...
sumber
Satu-satunya solusi yang bekerja dengan saya
sumber
Gunakan kode ini:
sumber
Tidak ada solusi yang berfungsi untuk saya di Firefox.
Solusi berikut mengubah gaya perbatasan pada fokus untuk Firefox dan menetapkan outline menjadi tidak ada untuk browser lain.
Saya telah secara efektif membuat batas fokus beralih dari cahaya biru 3px ke gaya batas yang cocok dengan batas area teks. Berikut beberapa gaya perbatasan:
Perbatasan putus-putus (perbatasan 2px putus-putus merah):
Tidak ada batasan! (batas 0px):
Batas teks (batas 1px abu-abu solid):
Ini kodenya:
sumber
Anda dapat mencoba ini juga
atau
sumber
Anda dapat menghapus batas oranye atau biru (garis besar) di sekitar kotak teks / input dengan menggunakan: garis besar: tidak ada
sumber
Hapus outline ketika fokus ada pada elemen, menggunakan properti CSS di bawah ini:
Properti CSS ini menghapus garis besar untuk semua bidang input pada fokus atau menggunakan kelas pseudo untuk menghapus garis besar elemen menggunakan properti CSS di bawah ini.
Properti ini menghapus garis besar untuk elemen yang dipilih.
sumber
Coba ini
Ini akan berpengaruh di seluruh halaman Anda
sumber