Cara menonaktifkan penyorotan pemilihan teks


5204

Untuk jangkar yang bertindak seperti tombol (misalnya, Pertanyaan , Tag , Pengguna , dll. Di bagian atas halaman Stack Overflow) atau tab, apakah ada cara standar CSS untuk menonaktifkan efek penyorotan jika pengguna secara tidak sengaja memilih teks?

Saya menyadari ini bisa dilakukan dengan JavaScript, dan sedikit googling menghasilkan opsi Mozilla-only -moz-user-select.

Apakah ada cara yang sesuai standar untuk mencapai ini dengan CSS, dan jika tidak, apa pendekatan "praktik terbaik"?


7
dapatkah elemen dalam penyihir elemen telah dinonaktifkan, apakah penyorotan diaktifkan dengan dalam css pada atribut style atau class? atau dengan kata lain, apakah ada nilai lain untuk -webkit-user-select dll. selain tidak sama sekali?

7
Terkait: stackoverflow.com/questions/16600479/… = cara mengizinkan hanya beberapa elemen anak untuk dipilih
JK.

9
Ada bug di beberapa browser di mana melakukan "Select All" (CTRL + A dan CMD + A) masih memilih beberapa hal. Ini bisa diperjuangkan dengan warna seleksi transparan: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
DaAwesomeP

12
Bisakah saya mengatakan: tolong jangan lakukan ini. Dari pengalaman saya, saya lebih sering daripada tidak ingin memilih teks yang juga berfungsi sebagai tombol, untuk menyalin-menempelkannya di tempat lain. Akan sangat menyebalkan untuk tidak dapat melakukan itu karena beberapa pengembang web berusaha keras untuk menonaktifkan fitur ini untuk saya. Jadi tolong jangan lakukan ini kecuali Anda memiliki alasan yang sangat, sangat bagus.
kajacx

3
Pada tahun 2017, itu adalah cara yang lebih baik untuk menggunakan postcssdan autoprefixerdan set versi browser, kemudian postcssmembuat semuanya keren.
AmerllicA

Jawaban:


7324

UPDATE Januari, 2017:

Menurut Can I use , user-selectsaat ini didukung di semua browser kecuali Internet Explorer 9 dan versi sebelumnya (tetapi sayangnya masih membutuhkan awalan vendor).


Semua variasi CSS yang benar adalah:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Perhatikan bahwa user-selectsedang dalam proses standardisasi (saat ini dalam draft kerja W3C ). Itu tidak dijamin untuk bekerja di mana-mana, dan mungkin ada perbedaan dalam implementasi di antara browser dan di masa depan browser dapat menjatuhkan dukungan untuk itu.


Informasi lebih lanjut dapat ditemukan di dokumentasi Jaringan Pengembang Mozilla .


38
kode bagus molokoloco: D, meskipun saya pribadi akan tinggal jauh dari menggunakannya, karena kadang-kadang Anda mungkin perlu nilai yang berbeda untuk browser yang berbeda, dan itu bergantung pada JavaScript. Membuat kelas dan menambahkannya ke elemen Anda atau menerapkan css ke tipe elemen Anda di style-sheet Anda adalah bukti yang bagus.
Blowsie

58
'user-select'- Nilai: tidak ada | teks | beralih | elemen | elemen | semua | mewarisi - w3.org/TR/2000/WD-css3-userint-20000216
Blowsie

34
Sebenarnya -o-pengguna-pilih tidak diterapkan di Opera. Ini mengimplementasikan atribut IE yang tidak dapat dipilih sebagai gantinya.
Tim Down

30
Untuk beberapa alasan, ini saja tidak bekerja di IE8, saya kemudian menambahkan <div onselectstart="return false;">ke div utama saya.
robasta

308
ini konyol! begitu banyak cara berbeda untuk melakukan hal yang sama. mari buat standar baru untuk pemilihan pengguna. kami akan menyebutnya standard-user-select. maka kita tidak akan memiliki masalah ini. meskipun untuk kompatibilitas mundur kita harus memasukkan yang lain juga. jadi sekarang kodenya jadi -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ah, jauh lebih baik.
Claudiu

854

Di sebagian besar browser, ini dapat dicapai dengan menggunakan variasi kepemilikan pada user-selectproperti CSS , yang awalnya diusulkan dan kemudian ditinggalkan di CSS 3 dan sekarang diusulkan di CSS UI Level 4 :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Untuk Internet Explorer <10 dan Opera <15, Anda harus menggunakan unselectableatribut elemen yang Anda inginkan tidak dapat dipilih. Anda dapat mengatur ini menggunakan atribut dalam HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Sayangnya properti ini tidak diwarisi, artinya Anda harus meletakkan atribut di tag awal setiap elemen di dalamnya <div>. Jika ini masalah, Anda bisa menggunakan JavaScript untuk melakukan ini secara rekursif untuk keturunan elemen:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Pembaruan 30 April 2014 : Traversal pohon ini perlu dijalankan kembali setiap kali elemen baru ditambahkan ke pohon, tetapi tampaknya dari komentar oleh @Han bahwa mungkin untuk menghindari ini dengan menambahkan mousedownevent handler yang menetapkan unselectabletarget dari peristiwa. Lihat http://jsbin.com/yagekiji/1 untuk detailnya.


Ini masih belum mencakup semua kemungkinan. Meskipun tidak mungkin untuk memulai pemilihan dalam elemen yang tidak dapat dipilih, di beberapa browser (Internet Explorer dan Firefox, misalnya) masih tidak mungkin untuk mencegah pilihan yang dimulai sebelum dan berakhir setelah elemen yang tidak dapat dipilih tanpa membuat seluruh dokumen tidak dapat dipilih.


30
Anda harus menghapus pemilih * dari contoh Anda, benar-benar tidak efisien dan benar-benar tidak perlu menggunakannya dalam contoh Anda, apakah ada?
Blowsie

66
@Lowlow: Saya tidak berpikir begitu: CSS 2 spec menyatakan itu *.foodan .foopersis setara (dalam kasus kedua, pemilih universal ( *) tersirat), jadi cegah pembatasan browser, saya tidak bisa melihat bahwa termasuk *kehendak akan membahayakan kinerja. Sudah lama kebiasaan saya untuk memasukkan *, yang awalnya saya mulai lakukan untuk dibaca: secara eksplisit menyatakan sekilas bahwa penulis bermaksud untuk mencocokkan semua elemen.
Tim Down

38
oooh setelah beberapa bacaan lebih lanjut, tampaknya * hanya tidak efisien ketika menggunakannya sebagai kunci (pemilih paling tinggi) yaitu .direksi *. Info lebih lanjut di sini code.google.com/speed/page-speed/docs/…
Blowsie

20
Alih-alih menggunakan class = "unselectable", cukup gunakan pemilih atribut [unselectable = "on"] {...}
Chris Calo

13
@ Francisc: Tidak. Seperti yang saya katakan kepada Blowsie sebelumnya di komentar, itu tidak membuat perbedaan.
Tim Down

196

Solusi JavaScript untuk Internet Explorer adalah:

onselectstart="return false;"

55
Jangan lupakan ondragstart!
Mathias Bynens

9
satu hal lagi di sini. Jika Anda menambahkannya ke badan maka Anda tidak akan dapat memilih teks di dalam textareas atau bidang input di IE. Cara saya memperbaikinya untuk IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
TheBrain

2
Ini dapat ditambahkan sebagai atribut menggunakan jQuery - $ ("p"). Attr ("onselectstart", "return false") Ini adalah satu-satunya metode yang dapat diandalkan untuk saya di IE8
Matt

13
@Abudayah karena tidak berfungsi di versi Internet Explorer yang lebih lama? Itu, seperti, inti dari jawaban ini.
Pekka

?? saya masih dapat selalu memilih teks dalam inputelemen bahkan jika saya menggunakan user-select: none. saya perlu tahu bagaimana mencegah ini
oldboy

191

Sampai properti pilihan pengguna CSS 3 menjadi tersedia, browser berbasis Gecko mendukung -moz-user-selectproperti yang sudah Anda temukan. Browser berbasis WebKit dan Blink mendukung -webkit-user-selectproperti ini.

Ini tentu saja tidak didukung di browser yang tidak menggunakan mesin rendering Tokek.

Tidak ada "standar" yang sesuai cara cepat dan mudah untuk melakukannya; menggunakan JavaScript adalah sebuah opsi.

Pertanyaan sebenarnya adalah, mengapa Anda ingin pengguna tidak dapat menyorot dan mungkin menyalin dan menempel elemen tertentu? Saya belum menemukan satu kali pun yang saya ingin agar pengguna tidak menyorot sebagian situs web saya. Beberapa teman saya, setelah menghabiskan berjam-jam membaca dan menulis kode akan menggunakan fitur highlight sebagai cara untuk mengingat di mana halaman itu berada, atau memberikan penanda sehingga mata mereka tahu ke mana harus mencari berikutnya.

Satu-satunya tempat yang saya anggap bermanfaat adalah jika Anda memiliki tombol untuk formulir yang tidak boleh disalin dan ditempelkan jika pengguna menyalin dan menempelkan situs web.


20
Hal-hal kancing akan menjadi motivasi saya.
Kriem

27
Alasan lain ini diperlukan adalah mengklik Shift untuk memilih beberapa baris dalam kotak atau tabel. Anda tidak ingin menyorot teks, Anda ingin memilih baris.
Gordon Tucker

7
Ada juga masalah hukum di mana konten orang lain diterbitkan ulang secara hukum tetapi klausul dalam lisensi mengharuskan penerbit web untuk mencegah teks agar tidak mudah disalin dan ditempelkan. Inilah yang membuat saya menemukan pertanyaan ini. Saya tidak setuju dengan persyaratan ini tetapi perusahaan yang saya kontrak akan diwajibkan secara hukum untuk menerapkannya dengan cara ini.
Craig M

5
@CraigM Gaya css tidak menghentikan seseorang untuk mengambil sumber HTML dan menyalinnya. Jika Anda ingin melindungi konten Anda, Anda harus menemukan cara yang lebih baik.
Agile Jedi

27
Aplikasi web yang sangat interaktif dengan banyak drag & drop ... penyorotan tidak disengaja adalah masalah kegunaan yang besar.
Marc Hughes

138

Jika Anda ingin menonaktifkan pemilihan teks pada segala hal kecuali pada <p>elemen, Anda dapat melakukan ini dalam CSS (perhatikan -moz-noneyang memungkinkan penggantian dalam sub-elemen, yang diizinkan di browser lain dengan none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

12
Pastikan Anda juga membuat kolom input dapat dipilih: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
joshuadelange

11
Berhati-hatilah dengan mematikan harapan UI browser pada SEMUA kode kecuali untuk satu item. Bagaimana dengan daftar item <li /> teks, misalnya?
Jason T Featheringham

Hanya pembaruan ... menurut MDN sejak Firefox 21 -moz-nonedan nonesama.
Kevin Fegan

2
Untuk ini, Anda dapat menambahkan kursor: default dan kursor: masing-masing teks
:)

THE bom. Artinya. TAMAT. ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[memilih segala sesuatu dalam daftar yang tidak diurutkan, dan membuatnya tidak dapat dipilih, daripada menghancurkan seluruh pohon tampilan.] Terima kasih atas pelajarannya. Daftar tombol saya terlihat hebat, dan merespons dengan benar terhadap ketukan dan penekanan layar, daripada meluncurkan IME (widget clipboard android).
Hypersoft Systems

125

Dalam solusi di jawaban jawaban sebelumnya dihentikan, tetapi pengguna masih berpikir Anda dapat memilih teks karena kursor masih berubah. Agar tetap statis, Anda harus mengatur kursor CSS Anda:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Ini akan membuat teks Anda benar-benar rata, seperti pada aplikasi desktop.


"Flat" sebagai lawan dari apa?
kojow7

@ kojow7 Berbeda dengan "berlapis". Alih-alih teks mengambang di atas elemen lainnya. Ini mirip dengan perbedaan antara gambar SVG dan PNG.
Yeti

4
Terkejut mengetahui bahwa Firefox masih memerlukan awalan vendor pada tahun 2019. Saya hanya mengabaikannya saja user-select: none;, berpikir standar akan diadopsi sekarang, tetapi sayangnya tidak. Membuat Anda bertanya-tanya apa yang masih bisa diperdebatkan oleh orang-orang di komite standar. "Tidak, kalian ... aku benar-benar berpikir itu harus user-select: cant;karena itu lebih deskriptif, kau tahu?" "Kita sudah membahas ini, Mike. Kita harus menghilangkan tanda kutip, dan itu bentuk yang buruk!" "Cukup, semuanya! Kita akan membahas masalah ini lagi bulan depan. Rapat Komite Standar ditunda!"
Mentalis

109

Anda dapat melakukannya di Firefox dan Safari (Chrome juga?)

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

121
Saya tidak akan merekomendasikan melakukan ini, karena itu sebenarnya tidak memperbaiki masalah; menonaktifkan pemilihan teks - itu hanya menyembunyikannya. Ini dapat menyebabkan kegunaan yang buruk, karena jika saya menyeret kursor saya di sekitar halaman saya bisa memilih teks sembarang tanpa menyadarinya. Ini dapat menyebabkan semua jenis kegunaan "bug".
Keithamus

1
Tidak berfungsi pada gambar PNG dengan area transparan: Akan selalu memilih dengan warna biru muda ... Ada solusi?
AvL

80

Penanganan masalah untuk WebKit :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Saya menemukannya dalam contoh CardFlip.


1
Menggunakan transparentsebagai pengganti rgba juga berfungsi di Chrome 42 di Android.
Clint Pachl

77

Saya suka solusi hybrid CSS + jQuery.

Untuk membuat semua elemen di dalam <div class="draggable"></div>tidak dapat dipilih, gunakan CSS ini:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

Dan kemudian, jika Anda menggunakan jQuery, tambahkan ini di dalam $(document).ready()blok:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Saya pikir Anda masih ingin elemen input untuk dapat berinteraksi, maka :not()pseudo-selector. Anda bisa menggunakannya '*'sebagai gantinya jika Anda tidak peduli.

Peringatan: Internet Explorer 9 mungkin tidak memerlukan bagian jQuery tambahan ini, jadi Anda mungkin ingin menambahkan versi cek di sana.


5
Gunakan -ms-pengguna-pilih: tidak ada; (untuk IE10) dan jQuery Anda "jika" harus seperti ini: if (($ .browser.msie && $ .browser.version <10) || $ .browser.opera)
mhenry1384

Berhati-hatilah !!! Untuk membuatnya dapat dipilih di firefox, Anda harus menggunakan-moz-user-select: Normal;
Nicolas Thery

7
@ mhenry1384 jQuery.browsertelah ditinggalkan sejak versi 1.3 dan telah dihapus dalam versi 1.9 - api.jquery.com/jQuery.browser
WynandB

@ Winny Poin bagus. Tetapi "deteksi fitur" macam apa yang ada untuk menentukan properti CSS mana yang akan digunakan?
Tom Auger

@ TomAuger Anda dapat menggunakan jQuery.support, memungkinkan Anda memeriksa fitur tunggal: Tautan
Aequanox

69

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Tapi itu bukan cara terbaik.


3
Anda juga bisa menggunakan titlesebagai atribut.
Sikat gigi

6
Itu solusi yang sangat kreatif. Apalagi jika menggunakan atribut judul karena itu mungkin akan lebih baik untuk pembaca layar.
pseudosavant

4
Saya mencobanya ( JSBin ) dan tidak berfungsi di IE. Sayangnya, IE yang lebih lama adalah satu-satunya yang user-selecttidak berfungsi.
pseudosavant

1
Ini adalah alternatif non-JS yang bagus yang berfungsi di Chrome! Luar biasa!
saricden

cantik! ......
Kesepian

69

Anda dapat menggunakan CSS atau JavaScript untuk itu.

The JavaScript Cara didukung dalam lebih tua browser, seperti lama versi Internet Explorer juga, tetapi jika itu tidak terjadi, gunakan cara CSS maka:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>


59

Sebagai tambahan untuk Internet Explorer, Anda perlu menambahkan kelas pseudofocus (.ClassName: fokus) dan outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

3
Ini berfungsi di IE selama seleksi dimulai pada elemen dengan classNamekelas. Lihat JSBin ini .
pseudosavant

57

Cobalah untuk memasukkan baris-baris ini ke dalam CSS dan panggil "disHighlight" di properti kelas:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

51

Pembaruan Peretas Cepat

Jika Anda menggunakan nilai noneuntuk semua user-selectproperti CSS (termasuk awalan peramban itu), ada masalah yang masih bisa terjadi dengan ini.

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

Seperti kata CSS-Trik , masalahnya adalah:

WebKit masih memungkinkan teks untuk disalin, jika Anda memilih elemen di sekitarnya.

Anda juga dapat menggunakan yang di bawah ini untuk memilih enforceseluruh elemen yang berarti jika Anda mengklik suatu elemen, semua teks yang dibungkus dengan elemen itu akan dipilih. Untuk ini yang harus Anda lakukan adalah mengubah nilainya nonemenjadi all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

48

Bagi mereka yang kesulitan mencapai hal yang sama di browser Android dengan acara sentuh, gunakan:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}


46
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
-webkit-user-select: none;
-moz-user-select: none;
onselectstart="return false;"
::selection { 
    background: transparent; 
}

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

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
<div class="draggable"></div>
.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }
if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

46

Kerja

CSS:

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

Ini seharusnya bekerja, tetapi tidak akan berfungsi untuk browser lama. Ada masalah kompatibilitas browser.


Properti CSS yang tidak diperbaiki harus benar-benar di akhir daftar versi properti yang diawali. Ini adalah praktik yang benar baik, yang lain adalah praktik buruk membuat "IE baru" dari Chrome / Webkit dan mengarah ke HAL-HAL UGLY begitu banyak dengan memperkenalkan dukungan awalan -webkit di browser webkit bukan. Lihat, ini sudah ada di 2012: dev.opera.com/articles/…
FlameStorm

Dan saya kutip:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.
FlameStorm

42

Dengan SASS (sintaks SCSS)

Anda dapat melakukan ini dengan mixin :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

Dalam tag HTML:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Cobalah di CodePen ini .

Jika Anda menggunakan autoprefixer, Anda dapat menghapus awalan lainnya.

Kompatibilitas browser di sini .


36

Selain dari properti Mozilla saja, tidak, tidak ada cara untuk menonaktifkan pemilihan teks hanya dengan CSS standar (seperti yang sekarang).

Jika Anda perhatikan, Stack Overflow tidak menonaktifkan pemilihan teks untuk tombol navigasi mereka, dan saya akan merekomendasikan untuk tidak melakukannya dalam kebanyakan kasus, karena memodifikasi perilaku pemilihan normal dan membuatnya bertentangan dengan harapan pengguna.


Sementara saya setuju bahwa itu mengubah perilaku yang diharapkan pengguna, masuk akal untuk hal-hal seperti tombol "Tambah Komentar" yang ada di sebelah bidang formulir ini ...
X-Istence

Tapi bukankah itu mengekspos detail implementasi yang tidak perlu? Input atau teks tombol tidak dapat dipilih.

@anon: Sebagian besar pengguna mungkin tidak akan mencoba memilih teks tombol Anda, jadi dalam praktiknya, itu tidak terlalu menjadi masalah. Selain itu, untuk melakukannya, mereka harus mulai memilih di luar tombol — jika mereka mengklik di dalam tombol itu sendiri, pengendali onclick akan mengaktifkan sebagai gantinya. Plus, browser tertentu (misalnya Safari) sebenarnya memungkinkan Anda memilih teks tombol normal ...
hbw

6
Jika Anda memilih satu set komentar dari utas obrolan dan setiap komentar memiliki tombol upvote / downvote di sebelahnya, maka akan lebih baik untuk memilih teks tanpa hal-hal lain. Itulah yang diharapkan atau diinginkan pengguna. Dia tidak ingin menyalin / menempelkan label tombol dengan setiap komentar.
Mnebuerquo

2
Dan bagaimana jika Anda misalnya klik dua kali tombol yang alih-alih mengarahkan Anda ke halaman lain membuka div? maka teks untuk tombol akan dipilih karena klik dua kali!
Gigala

34

Ini berfungsi di beberapa browser:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

Cukup tambahkan elemen / id yang Anda inginkan di depan pemilih yang dipisahkan oleh koma tanpa spasi, seperti:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

Jawaban lainnya lebih baik; ini mungkin harus dilihat sebagai jalan terakhir / catchall.


3
Ada beberapa hal yang dapat diketahui dengan pasti, tetapi solusi ini jelas tidak bekerja di semua browser.
Volker E.

33

Misalkan ada dua divs seperti ini:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

Tetapkan kursor ke default sehingga akan memberikan nuansa yang tidak dapat dipilih untuk pengguna.

Awalan perlu digunakan untuk mendukungnya di semua browser. Tanpa awalan, ini mungkin tidak bekerja di semua jawaban.



29

Tambahkan ini ke div pertama di mana Anda ingin menonaktifkan pemilihan teks:

onmousedown='return false;' 
onselectstart='return false;'

28

CATATAN:

Jawaban yang benar adalah benar karena itu mencegah Anda memilih teks. Namun, itu tidak menghalangi Anda untuk dapat menyalin teks, seperti yang akan saya tunjukkan dengan beberapa tangkapan layar berikutnya (per 7 November 2014).

Sebelum kita memilih apa pun

Setelah kami memilih

Jumlahnya sudah disalin

Seperti yang Anda lihat, kami tidak dapat memilih angka, tetapi kami dapat menyalinnya.

Diuji pada: Ubuntu , Google Chrome 38.0.2125.111.


1
Saya memiliki masalah yang sama. Di Mac Chrome 48.0.2564.116 dan di Mac Safari 9.0.3. Khususnya, Mac Firefox 43.0 tidak menyalin karakter, tetapi menempelkan endline tambahan di antara mereka. Apa yang harus dilakukan tentang ini?
NHDaly

26

Untuk mendapatkan hasil yang saya butuhkan, saya menemukan saya harus menggunakan keduanya ::selectiondanuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

finalyyyyyyy jawaban yang berfungsi
oldboy

23

Ini mudah dilakukan dengan:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Kalau tidak:

Katakanlah Anda punya <h1 id="example">Hello, World!</h1>. Anda harus menghapus innerHTML itu h1, dalam hal ini Halo, Dunia . Maka Anda harus pergi ke CSS dan melakukan ini:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

Sekarang hanya berpikir itu adalah elemen blok, dan bukan teks.



21

Periksa solusi saya tanpa JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Menu popup dengan teknik saya diterapkan: http://jsfiddle.net/y4Lac/2/


21

Meskipun pseudo-element ini dalam konsep CSS Selectors Level 3, elemen itu dihapus selama fase Calon Rekomendasi, karena kelihatannya perilakunya kurang spesifik, terutama dengan elemen bersarang, dan interoperabilitas tidak tercapai.

Ini sedang dibahas di How :: selection bekerja pada elemen bersarang .

Meskipun sedang diimplementasikan di browser, Anda dapat membuat ilusi teks tidak dipilih dengan menggunakan warna dan warna latar yang sama pada pemilihan pada desain tab (dalam kasus Anda).

Desain CSS normal

p { color: white;  background: black; }

Saat seleksi

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Menolak pengguna untuk memilih teks akan meningkatkan masalah kegunaan.


Inilah sebabnya mengapa penyelesaian otomatis Netbeans tidak tahu apa yang saya bicarakan!
Halfer
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.