Comment désactiver la surbrillance de la sélection de texte

Pour les ancres qui agissent comme des boutons (par exemple, des questions , des balises , des utilisateurs , etc. en haut de la page Débordement de pile) ou des onglets, existe-t-il un moyen standard CSS de désactiver l'effet de surbrillance si l'utilisateur sélectionne accidentellement le texte?

Je me rends compte que cela pourrait être fait avec JavaScript, et un peu de recherche sur Google a donné l' -moz-user-selectoption Mozilla uniquement .

Existe-t-il un moyen conforme aux normes pour y parvenir avec CSS, et sinon, quelle est l'approche des "meilleures pratiques"?

MISE À JOUR janvier 2017:

Selon Puis-je utiliser , le user-selectest actuellement pris en charge dans tous les navigateurs, à l'exception d'Internet Explorer 9 et des versions antérieures (mais a malheureusement encore besoin d'un préfixe de fournisseur).

Toutes les variantes CSS correctes sont:

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

Notez que cela user-selectest en cours de normalisation (actuellement dans un projet de travail du W3C ). Il n'est pas garanti de fonctionner partout, et il pourrait y avoir des différences d'implémentation entre les navigateurs et, à l'avenir, les navigateurs pourraient abandonner la prise en charge.

Plus d'informations peuvent être trouvées dans la documentation de Mozilla Developer Network .

Dans la plupart des navigateurs, cela peut être réalisé en utilisant des variations propriétaires sur la user-selectpropriété CSS , initialement proposées puis abandonnées dans CSS 3 et maintenant proposées dans 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;
}

Pour Internet Explorer <10 et Opera <15, vous devrez utiliser l' unselectableattribut de l'élément que vous souhaitez ne pas pouvoir sélectionner. Vous pouvez définir cela en utilisant un attribut en HTML:

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

Malheureusement, cette propriété n'est pas héritée, ce qui signifie que vous devez mettre un attribut dans la balise de début de chaque élément à l'intérieur du <div>. Si c'est un problème, vous pouvez utiliser à la place JavaScript pour le faire récursivement pour les descendants d'un élément:

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

Mise à jour du 30 avril 2014 : cette traversée d'arbre doit être réexécutée chaque fois qu'un nouvel élément est ajouté à l'arborescence, mais il semble d'après un commentaire de @Han qu'il est possible d'éviter cela en ajoutant unmousedown gestionnaire d'événements qui se positionne unselectablesur la cible du un événement. Voir http://jsbin.com/yagekiji/1 pour plus de détails.

Cela ne couvre toujours pas toutes les possibilités. Bien qu'il soit impossible d'initier des sélections dans des éléments non sélectionnables, dans certains navigateurs (Internet Explorer et Firefox, par exemple), il est toujours impossible d'empêcher les sélections qui commencent avant et se terminent après l'élément non sélectionnable sans rendre l'ensemble du document non sélectionnable.

Une solution JavaScript pour Internet Explorer est:

onselectstart="return false;"

Jusqu'à ce que la propriété de sélection d' utilisateur de CSS 3 soit disponible, les navigateurs basés sur Gecko prennent en charge la -moz-user-selectpropriété que vous avez déjà trouvée. Les navigateurs WebKit et Blink prennent en charge-webkit-user-select propriété.

Bien sûr, cela n'est pas pris en charge dans les navigateurs qui n'utilisent pas le moteur de rendu Gecko.

Il n'y a pas de moyen rapide et facile conforme aux «normes»; l'utilisation de JavaScript est une option.

La vraie question est, pourquoi voulez-vous que les utilisateurs ne soient pas en mesure de mettre en évidence et vraisemblablement de copier et coller certains éléments? Je n'ai pas rencontré une seule fois où je voulais ne pas laisser les utilisateurs mettre en évidence une certaine partie de mon site Web. Plusieurs de mes amis, après avoir passé de nombreuses heures à lire et à écrire du code, utiliseront la fonction de surbrillance pour se souvenir de l'endroit où ils se trouvaient sur la page ou pour fournir un marqueur afin que leurs yeux sachent où regarder ensuite.

Le seul endroit où j'ai pu voir que cela était utile est si vous avez des boutons pour les formulaires qui ne doivent pas être copiés et collés si un utilisateur copie et colle le site Web.

Si vous souhaitez désactiver la sélection de texte sur tout sauf sur les <p>éléments, vous pouvez le faire en CSS (faites attention à ce -moz-nonequi permet de remplacer les sous-éléments, ce qui est autorisé dans les autres navigateurs avec 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;
}

Dans les solutions des réponses précédentes, la sélection est arrêtée, mais l'utilisateur pense toujours que vous pouvez sélectionner du texte car le curseur change toujours. Pour le garder statique, vous devrez définir votre curseur CSS:

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

Cela rendra votre texte totalement plat, comme il le serait dans une application de bureau.

Vous pouvez le faire dans Firefox et Safari (Chrome aussi?)

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

Solution de contournement pour WebKit :

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

Je l'ai trouvé dans un exemple CardFlip.

J'aime la solution hybride CSS + jQuery.

Pour rendre tous les éléments à l'intérieur <div class="draggable"></div>non sélectionnables, utilisez ce CSS:

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

Et puis, si vous utilisez jQuery, ajoutez ceci dans un $(document).ready()bloc:

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

Je suppose que vous voulez toujours que tous les éléments d'entrée soient interactifs, d'où le :not()pseudo-sélecteur. Vous pourriez utiliser'*' place si vous ne vous en souciez pas.

Mise en garde: Internet Explorer 9 peut ne pas avoir besoin de cette pièce jQuery supplémentaire, vous pouvez donc y ajouter une vérification de version.

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Ce n'est pas le meilleur moyen, cependant.

Vous pouvez utiliser CSS ou JavaScript pour cela.

La méthode JavaScript est prise en charge dans les anciens navigateurs, comme les anciennes versions d'Internet Explorer également, mais si ce n'est pas votre cas, utilisez la méthode CSS:

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>

Pour Internet Explorer en plus, vous devez ajouter une pseudo-classefocus (.ClassName: focus) et 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  */
}

Essayez d'insérer ces lignes dans le CSS et appelez le "disHighlight" à la propriété de classe:

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

Une mise à jour rapide du hack

Si vous utilisez la valeur nonepour toutes les user-selectpropriétés CSS (y compris les préfixes du navigateur), il y a un problème qui peut toujours survenir.

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

Comme le dit CSS-Tricks , le problème est:

WebKit permet toujours de copier le texte, si vous sélectionnez des éléments autour de lui.

Vous pouvez également utiliser celui ci-dessous pour sélectionner enforceun élément entier, ce qui signifie que si vous cliquez sur un élément, tout le texte encapsulé dans cet élément sera sélectionné. Pour cela, tout ce que vous avez à faire est de changer la valeur noneen 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  */
}

Pour ceux qui ont du mal à obtenir la même chose dans le navigateur Android avec l'événement tactile, utilisez:

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

Si vous utilisez Less et Bootstrap, vous pouvez écrire:

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

Travail

CSS:

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

Cela devrait fonctionner, mais cela ne fonctionnera pas pour les anciens navigateurs. Il y a un problème de compatibilité du navigateur.

Avec SASS (syntaxe SCSS)

Vous pouvez le faire avec un 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;
}

Dans une balise HTML:

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

Essayez-le dans ce CodePen .

Si vous utilisez un préfixeur automatique, vous pouvez supprimer d'autres préfixes.

Compatibilité du navigateur ici .

Mis à part la propriété Mozilla uniquement, non, il n'y a aucun moyen de désactiver la sélection de texte avec juste CSS standard (à partir de maintenant).

Si vous remarquez, Stack Overflow ne désactive pas la sélection de texte pour leurs boutons de navigation, et je déconseille de le faire dans la plupart des cas, car il modifie le comportement de sélection normal et le rend en conflit avec les attentes d'un utilisateur.

Cela fonctionne dans certains navigateurs:

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

Ajoutez simplement vos éléments / identifiants souhaités devant les sélecteurs séparés par des virgules sans espaces, comme ceci:

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

Les autres réponses sont meilleures; cela devrait probablement être considéré comme un dernier recours / fourre-tout.

Supposons qu'il y en ait deux divcomme ceci:

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

Réglez le curseur par défaut afin qu'il donne une sensation non sélectionnable à l'utilisateur.

Le préfixe doit être utilisé pour le prendre en charge dans tous les navigateurs. Sans préfixe, cela peut ne pas fonctionner dans toutes les réponses.

Cela sera utile si la sélection des couleurs n'est pas non plus nécessaire:

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

... tous les autres correctifs du navigateur. Cela fonctionnera dans Internet Explorer 9 ou version ultérieure.

Ajoutez ceci à la première div dans laquelle vous souhaitez désactiver la sélection de texte:

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

REMARQUE:

La bonne réponse est correcte dans la mesure où elle vous empêche de pouvoir sélectionner le texte. Cependant, cela ne vous empêche pas de pouvoir copier le texte, comme je le montrerai avec les prochaines captures d'écran (à partir du 7 novembre 2014).

Comme vous pouvez le voir, nous n'avons pas pu sélectionner les numéros, mais nous avons pu les copier.

Testé sur: Ubuntu , Google Chrome 38.0.2125.111.

Pour obtenir le résultat dont j'avais besoin, j'ai trouvé que je devais utiliser les deux ::selectionetuser-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;
}

Cela se fait facilement avec:

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

Alternativement:

Disons que vous en avez un <h1 id="example">Hello, World!</h1>. Vous devrez supprimer le innerHTML de cela h1, dans ce cas Hello, World . Ensuite, vous devrez aller sur CSS et faire ceci:

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

Maintenant, il pense simplement qu'il s'agit d'un élément de bloc, et non de texte.

Ce n'est pas du CSS, mais cela vaut la peine d'être mentionné:

jQuery UI Désactiver la sélection :

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

Vérifiez ma solution sans 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 contextuel avec ma technique appliquée: http://jsfiddle.net/y4Lac/2/

Bien que ce pseudo-élément soit dans les ébauches de CSS Selectors Level 3, il a été supprimé pendant la phase de recommandation du candidat, car il semblait que son comportement était sous-spécifié, en particulier avec les éléments imbriqués, et l'interopérabilité n'était pas réalisée.

Il est en cours de discussion dans Comment :: la sélection fonctionne sur les éléments imbriqués .

Bien qu'il soit implémenté dans les navigateurs, vous pouvez faire une illusion de texte non sélectionné en utilisant la même couleur et la même couleur d'arrière-plan lors de la sélection que dans la conception de l'onglet (dans votre cas).

Conception CSS normale

p { color: white;  background: black; }

Sur sélection

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

Interdire aux utilisateurs de sélectionner le texte soulèvera des problèmes de convivialité.