CSS menonaktifkan pemilihan teks

93

Saat ini, saya telah meletakkan ini di tag body untuk menonaktifkan pilihan teks:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Namun, kotak inputdan saya textareasekarang tidak dapat dipilih. Bagaimana saya hanya dapat membuat elemen masukan ini dapat dipilih dan sisanya tidak dapat dipilih?

css Neil
sumber
Saya dapat memilih inputdan textareaelemen: jsfiddle.net/Smy26
Sampson
Sepertinya webkit memungkinkan pemilihan elemen tersebut, tetapi moz tidak.
Christian
5
kemungkinan duplikat aturan CSS untuk menonaktifkan penyorotan pemilihan teks
Mottie

Jawaban:

172

Jangan menerapkan properti ini ke seluruh tubuh. Pindahkan ke kelas dan terapkan kelas itu ke elemen yang ingin Anda nonaktifkan pilih:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
Sesuatu Kemenangan
sumber
3
Tidak didukung di Chrome, Safari.
knutole
5
@knutole Baca tabel lagi. The nilai dari elementtidak didukung di Chrome / Safari.
MForMarlon
31

Anda juga dapat menonaktifkan pemilihan pengguna di semua elemen:

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

Dan daripada mengaktifkannya pada elemen yang Anda inginkan agar pengguna dapat memilih:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}
Rik
sumber
1
Untuk dukungan browser penuh, Anda harus menambahkan atribut berikut ke elemen <body> atau <div>: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * gunakan dengan hati-hati, atribut terakhir dapat MEMPENGARUHI FUNGSI YANG ADA * /
Dan
11

Hanya ingin meringkas semuanya:

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

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>
Meglio
sumber
1
Versi lama Firefox mungkin memerlukan penambahan satu atribut lagi ke HTML: onmousedown = "return false"
Dan
2 
::selection,::moz-selection {color:currentColor;background:transparent}
BT
sumber
Seperti yang dinyatakan di sini w3schools.com/cssref/sel_selection.asp . Sejauh ini, ini bukan bagian dari spesifikasi CSS, dan Firefox memerlukan -moz-. Jadi yang benar adalah: :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}
Vladislav
1
@Vladislav Hal yang baik tentang awalan moz. Sejujurnya, jangan percaya w3sekolah. Itu sumber yang mengerikan. MDN memberikan versi kompatibilitas browser yang sebenarnya dan mencatat bahwa :: selection telah dihapus dari draf CSS, TAPI ditambahkan kembali: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Catatan lain, firefox siap menghapus kebutuhan akan awalan: bugzilla.mozilla.org/show_bug.cgi?id=509958
BT
2

Anda dapat menonaktifkan semua pilihan

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

sekarang Anda dapat mengaktifkan input dan text-area

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}
Shahnawaz
sumber
1

Gunakan pemilih kartu liar *untuk tujuan ini.

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Sekarang, setiap elemen di dalam div dengan id tidak divakan memiliki pilihan.

Demo

Starx
sumber
0

daripada bodymengetik daftar elemen yang Anda inginkan.

Eric Fortis
sumber
0

Saya setuju dengan Someh Victory, Anda perlu menambahkan kelas tertentu ke beberapa elemen yang ingin Anda batalkan pilihannya.

Selain itu, Anda dapat menambahkan kelas ini dalam kasus tertentu menggunakan javascript. Contoh di sini Membuat konten tidak dapat dipilih dengan bantuan CSS .

starikovs
sumber
0

Nonaktifkan pemilihan di mana saja

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7 

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
cristianojeda
sumber