css - Comment désactiver la sélection de texte

Mots clés : csscross-browserhighlighttextselection

meilleur 4 Réponses css - Comment désactiver la sélection de texte

vote vote

90

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

87

*.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; } 
<div id="foo" unselectable="on" class="unselectable">...</div> 
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")); 
vote vote

73

onselectstart="return false;" 
vote vote

62

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

Questions similaires