Pokoknya untuk mencegah sorotan Biru elemen di Chrome saat mengklik dengan cepat?

123

Sebagian besar waktu saya tidak khawatir tentang itu tetapi saya memiliki carousel gambar dan jika saya mengklik div berikutnya dan sebelumnya dengan cepat, mereka akan disorot di Chrome.

Saya mencoba menggunakan outline: none but no effect. Apakah ada solusi di luar sana?

css google-chrome Smith
sumber
Saya tidak melihat efek ini pada versi Chrome saat ini
Billal Begueradj
Saya tahu bahwa kasus penggunaan Anda berbeda, tetapi bagi siapa pun yang mungkin ingin menghapusnya dari semua tautan, saya tidak menyarankan untuk melakukannya. Saya telah mencoba menghapusnya di PWA, tetapi tanpa umpan balik visual, persepsi pengguna adalah bahwa aplikasinya lebih lambat.
collimarco

Jawaban:

170

Selain tautan yang disediakan oleh Floremin , yang menghapus pemilihan teks menggunakan JavaScript untuk "menghapus" pilihan, Anda juga dapat menggunakan CSS murni untuk melakukannya. CSS ada di sini ...

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Cukup tambahkan class="noSelect"atribut ke elemen yang ingin Anda terapkan kelas ini. Saya sangat merekomendasikan untuk mencoba solusi CSS ini. Tidak ada yang salah dengan menggunakan JavaScript, saya hanya percaya ini berpotensi lebih mudah, dan membersihkan sedikit di kode Anda.

Untuk chrome di android -webkit-tap-highlight-color: transparent; adalah aturan tambahan yang mungkin ingin Anda coba untuk mendapatkan dukungan di Android.

smts
sumber
1
Hanya untuk Chrome, Anda mungkin hanya membutuhkan user-selectdan webkit-user-select.
smts
Ini adalah solusi yang saya gunakan karena saya hanya mengalami masalah penyorotan di Chrome dan berfungsi dengan baik. Terima kasih untuk semua orang yang berpartisipasi!
Smith
36
Tidak dapat membuatnya bekerja dengan Chrome di Android. Saya harus menggunakan-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Iwazaru
25
-webkit-tap-highlight-color: transparent; adalah bagian penting di Chrome
FisNaN
Untuk chrome di android -webkit-tap-highlight-color: transparent; - Bekerja untukku, terima kasih!
CK Munn
213

Untuk Chrome di Android, Anda dapat menggunakan properti CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color adalah properti CSS non-standar yang menyetel warna sorotan yang muncul di atas tautan saat diketuk. Sorotan menunjukkan kepada pengguna bahwa ketukan mereka berhasil dikenali, dan menunjukkan elemen mana yang mereka ketuk.

Untuk menghapus sorotan sepenuhnya, Anda dapat mengatur nilainya menjadi transparent:

-webkit-tap-highlight-color: transparent;

Ketahuilah bahwa ini mungkin memiliki konsekuensi pada aksesibilitas: lihat outlinenone.com

Iwazaru
sumber
4
Saya menemukan bahwa ketika Anda berjalan di layar sentuh misalnya, Chrome akan berperilaku seperti di Android. Saya memiliki <div> yang akan berkedip biru setiap kali Anda mengeklik di suatu tempat di dalamnya. Hanya ketika saya menggunakan jawaban ini, barulah berhenti. Terima kasih!
Valorum
2
Tak satu pun dari atty css lain akan melakukan ini. Sangat penting karena penyorotan ketukan mendistorsi tampilan apa pun yang diklik, sehingga mengganggu bahasa visual Anda.
Dominic Cerisano
23
-webkit-tap-highlight-color: transparent;sepertinya bekerja juga.
Bernard
1
Saya menyukai ini, untuk acara sentuh itu adalah suatu keharusan! Informasi ini memiliki kegunaan "out of chart"!
Berker Yüceer
1
Ini solusi yang berhasil untuk saya pada tahun 2020
Bot Biru
66

Saya menjalankan Chrome versi 60 dan tidak ada jawaban CSS sebelumnya yang berfungsi.

Saya menemukan bahwa Chrome menambahkan sorotan biru melalui outlinegaya. Menambahkan CSS berikut memperbaikinya untuk saya:

:focus {
    outline: none !important;
}
Jeff L.
sumber
5
Anda, Tuan, adalah penyelamat.
beckah
2
ini yang berfungsi untuk Chrome (versi 61) di Android
Stefan
Berfungsi untuk versi Chrome yang lebih baru. Terima kasih!
CrazedCoder
Super, bertanya-tanya mengapa kepercayaan saya user-select:nonetidak ke mana
Sean T
Saya mencoba segalanya tetapi ini bekerja seperti pesona. Terima kasih telah menyelamatkan rambut saya!
Avinash Kumar
25

Tapi, kadang-kadang, bahkan dengan user-selectdan touch-calloutdimatikan, cursor: pointer;dapat menyebabkan efek ini, jadi, atur saja cursor: default;dan itu akan berhasil.

Gustavo B.
sumber
7
Ini adalah jawaban yang benar, cursor: pointer;benar-benar menyebabkan sorotan. Tetapi -webkit-tap-highlight-color: transparent;solusi yang lebih universal.
yanot
1
@yanot: baca peringatan tentang -webkit-tap-highlight-colorsebelum memberi label solusi yang relatif universal : developer.mozilla.org/en-US/docs/Web/CSS/…
Hassan Baig
@HassanBaig Saya pikir jelas bahwa yang saya maksud bukan lintas-browser universal , tetapi dalam konteks ini, yaitu di berbagai versi chrome
yanot
2
terima kasih - tidak ada solusi lain yang berhasil untuk saya. Harus menghapus penunjuk kursor untuk menghilangkan sorotan biru
RVP
3
cursor: defaultmelakukan trik untuk saya ketika tidak ada yang berhasil.
Telarian
-2

Coba buat penangan untuk acara pilih pada elemen tersebut dan di penangan Anda dapat menghapus pilihan.

Lihatlah ini:

Hapus Pilihan Teks dengan JavaScript

Ini adalah contoh menghapus seleksi. Anda hanya perlu memodifikasinya untuk bekerja hanya pada elemen spesifik yang Anda butuhkan.

Floremin
sumber
Jadi tidak bisa diperbaiki oleh CSS, ya? Bisakah saya menghapus teks yang dipilih di dalam penangan klik saya? EDIT- Terima kasih untuk contohnya. Ini menyebalkan bahwa itu harus ditangani melalui javascript. Saya berharap itu hanya masalah CSS.
Smith
Juga, apakah ini akan berdampak pada aksesibilitas?
Smith
Anda dapat menghapus teks di click handler, tetapi lihat jawaban @smts dengan CSS murni.
Floremin
-8

Ini bekerja paling baik untuk saya:

.noSelect:hover {
  background-color: white;
}
nagy.zsolt.hun
sumber
6
Ini BURUK dan jalan menuju neraka masa depan tertentu. Jangan tersinggung.
Mike Barwick
bagaimana jika background website tidak berwarna putih?
rideon88
Ini tidak bisa dipertahankan. Tidak ada yang melakukan ini, tolong.
Telarian