Bagaimana cara berhenti menyoroti elemen div saat mengklik dua kali

94

Saya memiliki elemen div ini dengan gambar latar belakang dan saya ingin berhenti menyoroti elemen div saat mengklik dua kali. Apakah ada properti CSS untuk ini?

css xhtml tags highlighting double-click dave
sumber
Anda menggunakan browser apa? Dalam pengujian saya, saya tidak bisa mendapatkan div keseluruhan untuk disorot di Firefox 5, Chrome 12 atau IE9.
tw16

Jawaban:

161

CSS di bawah ini menghentikan pengguna untuk dapat memilih teks. Contoh langsung: http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

Untuk menargetkan IE9 ke bawah dan Opera, atribut html unselectableharus digunakan sebagai gantinya:

<div unselectable="on">Test Text</div>
tw16
sumber
yang tidak mencegah seluruh div disorot. Saya perhatikan itu hanya untuk teks. Saya ingin mencegah seluruh div disorot saat mengklik dua kali di atasnya.
Dave
@ Dave: Saya berasumsi karena satu-satunya saat klik ganda menyebabkan penyorotan adalah ketika ada teks di dalamnya, itulah yang Anda maksud. Tidak perlu downvote.
tw16
1
Tidak berfungsi di IE atau Opera. Anda membutuhkan unselectableatribut tersebut. Tidak ada -o-user-select, ngomong-ngomong.
Tim Down
catatan untuk pengguna SASS / SCSS: Anda dapat @include user-select(none);menggunakan CSS mentah
hilnius
Anehnya, hal ini menyebabkan div menjadi dapat diseret bahkan saat draggable = false, tetapi hanya di Firefox.
rovyko
53

Ini berhasil untuk saya

html
{
  -webkit-tap-highlight-color:transparent;
}
Hans
sumber
Ini harus menjadi jawaban terbaik.
JohnA10
11
Ini hanya akan relevan untuk browser webkit seperti Chrome dan Safari, dan kemungkinan besar tidak akan berfungsi di versi IE atau Firefox mana pun.
Simon East
31

Saya mencoba menemukan solusi untuk menghentikan penyorotan div di Chrome, dan beralih ke posting ini. Namun, sayangnya, tidak ada jawaban yang menyelesaikan masalah saya.

Setelah banyak riset online, saya menemukan bahwa perbaikannya adalah sesuatu yang sangat sederhana. Tidak perlu CSS yang rumit. Cukup tambahkan CSS berikut ke halaman web Anda dan Anda sudah siap. Ini berfungsi di laptop serta layar seluler.

div { outline-style:none;}

CATATAN : Ini bekerja di Chrome Versi 44.0.2403.155 m. Juga, ini didukung di semua browser utama saat ini seperti yang dijelaskan di url ini: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

Sunil
sumber
8

Saya bukan ahli CSS, tapi saya pikir Anda dapat menggunakan jawaban tw16 selama Anda menambah jumlah elemen yang terpengaruh. Misalnya, ini mencegah penyorotan di mana-mana di halaman saya tanpa memengaruhi jenis interaktivitas lainnya:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

Baris pertama itu adalah milik Paul Irish (melalui http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).

SterlingVix
sumber
Jangan pernah menggunakan CSS ini saat Anda memiliki PWA di iOS 13, ini sepenuhnya memblokir keyboard.
Fer
2

Targetkan semua elemen div:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Targetkan semua elemen:

::-moz-selection { background:transparent; }
::selection { background:transparent; }
jasonleonhard
sumber
1

nonaktifkan pemilihan pengguna:

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

setel latar belakang transparan untuk elemen yang dipilih:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
Jin.
sumber
3
Meskipun cuplikan kode ini dapat menyelesaikan pertanyaan, menyertakan penjelasan sangat membantu meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa mendatang, dan orang-orang itu mungkin tidak tahu alasan saran kode Anda.
msrd0
0

Jika sebuah elemen dapat diklik, Anda mungkin ingin menjadikannya elemen tombol.

Medda86
sumber