Question Comment désactiver la mise en surbrillance de la sélection de texte?


Pour les ancrages qui agissent comme des boutons (par exemple, Des questions, Mots clés, Utilisateurs, etc. 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 un peu googling a cédé le Mozilla seulement -moz-user-select option.

Existe-t-il un moyen conforme à la norme pour ce faire avec CSS, et si non, quelle est l'approche des «meilleures pratiques»?


4351
2018-05-05 20:29


origine


Réponses:


MISE À JOUR Janvier 2017:

Selon Puis-je utiliser, la user-select est actuellement pris en charge dans tous les navigateurs sauf Internet Explorer 9 et versions antérieures (mais malheureusement encore a besoin d'un préfixe 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; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Notez que c'est un caractéristique non-standard (c'est-à-dire ne fait partie d'aucune spécification). Il n'est pas garanti de fonctionner partout, et il peut y avoir des différences dans la mise en œuvre parmi les navigateurs et dans le futur les navigateurs peuvent abandonner le support pour cela.


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


6361
2017-12-05 11:45



Dans la plupart des navigateurs, cela peut être réalisé en utilisant des variantes propriétaires sur le CSS user-select propriété, initialement proposé puis abandonné en CSS3 et maintenant proposé en CSS UI Niveau 4:

*.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 <15, vous devrez utiliser le unselectable attribut de l'élément que vous souhaitez être non sélectionnable. Vous pouvez définir ceci 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 placer 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 JavaScript pour faire ceci 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 30 avril 2014: Cette traversée d'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 ajouter un mousedown gestionnaire d'événements qui définit unselectable sur la cible de l'é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 (IE et Firefox, par exemple), il est toujours impossible d'empêcher les sélections qui commencent avant et après l'élément non sélectionnable sans rendre le document entier non sélectionnable.


727
2017-11-13 16:05



Une solution JavaScript pour IE est

onselectstart="return false;"

165
2018-05-05 20:37



Jusqu'à CSS 3 sélectionner par l'utilisateur la propriété devient disponible, Geckoles navigateurs basés sur -moz-user-select propriété que vous avez déjà trouvée. WebKit et les navigateurs basés sur Blink supportent -webkit-user-select propriété.

Ceci n'est bien sûr pas supporté dans les navigateurs qui n'utilisent pas le moteur de rendu Gecko.

Il n'y a pas de façon rapide et facile de le faire; L'utilisation de JavaScript est une option.

La vraie question est la suivante: pourquoi voulez-vous que les utilisateurs ne puissent pas mettre en évidence et probablement copier et coller certains éléments? Je n'ai pas rencontré une seule fois que 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 fonctionnalité de surbrillance pour se souvenir où ils se trouvaient sur la page ou pour fournir un marqueur afin que leurs yeux sachent où regarder.

Le seul endroit où je pourrais voir cela utile est si vous avez des boutons pour les formulaires qui ne devraient pas être copiés et collés si un utilisateur a copié et collé le site Web.


159
2018-05-24 21:24



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

120
2017-08-30 18:32



Dans les solutions ci-dessus, 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 ce serait le cas dans une application de bureau.


111
2018-05-05 20:46



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

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

101
2017-09-21 07:09



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.


73
2017-11-11 19:53