Cara menonaktifkan penyorotan pemilihan teks

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"?

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 .

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.

Solusi JavaScript untuk Internet Explorer adalah:

onselectstart="return false;"

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.

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;
}

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.

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

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

Penanganan masalah untuk WebKit :

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

Saya menemukannya dalam contoh CardFlip.

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.

.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.

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>

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  */
}

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;
}

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  */
}

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;
}

Jika Anda menggunakan Less dan Bootstrap Anda bisa menulis:

.user-select(none);

-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');

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.

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 .

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.

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.

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.

Ini akan berguna jika pemilihan warna juga tidak diperlukan:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... semua perbaikan browser lainnya. Ini akan bekerja di Internet Explorer 9 atau yang lebih baru.

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

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

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).

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

Diuji pada: Ubuntu , Google Chrome 38.0.2125.111.

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;
}

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.

Ini bukan CSS, tetapi perlu disebutkan:

jQuery UI Nonaktifkan Pilihan :

$("your.selector").disableSelection();

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/

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.