Règle CSS pour désactiver la mise en évidence de la sélection de texte

Question

Pour les ancres qui agissent comme des boutons (par exemple, Questions , Tags , Utilisateurs en haut de la page Stack Overflow) 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 une petite recherche sur Google m'a permis de trouver la version de Mozilla uniquement. -moz-user-select option.

Existe-t-il un moyen normalisé d'y parvenir avec CSS et, dans le cas contraire, quelle est la meilleure approche ?

Answer 1

Toutes les variantes correctes de CSS sont :

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

---

Vous trouverez de plus amples informations ici .

Answer 2

Dans la plupart des navigateurs, cela peut être réalisé en utilisant des variations propriétaires de la fonction proposé-mais-maintenant-défini CSS3 user-select propriété :

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

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

Pour IE < 10 et Opera, vous devrez utiliser l'option unselectable de l'élément que vous souhaitez rendre non sélectionnable. Vous pouvez définir ce paramètre à l'aide d'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 placer un attribut dans la balise de début de chaque élément à l'intérieur de la balise <div> . Si cela pose un problème, vous pouvez utiliser JavaScript pour effectuer cette opération de manière récursive 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 de l'arbre doit être ré-exécutée chaque fois qu'un nouvel élément est ajouté à l'arbre, mais il semble, d'après un commentaire de @Han, qu'il est possible d'éviter cela en ajoutant un mousedown qui définit unselectable sur la cible de l'événement. Voir http://jsbin.com/yagekiji/1 pour les détails.

---

Cela ne couvre toujours pas toutes les possibilités. S'il est impossible d'initier des sélections dans des éléments non sélectionnables, dans certains navigateurs (IE et Firefox, par exemple), il est encore 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.

Answer 3

Une solution JavaScript pour IE est

onselectstart="return false;"

Answer 4

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

Answer 5

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

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