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

5204

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

Peter Mortensen
la source
7
les éléments de l'élément peuvent-ils désactiver la surbrillance, activer la surbrillance avec in css dans l'attribut style ou class? ou en d'autres termes, existe-t-il d'autres valeurs pour -webkit-user-select ect. autre que rien?
7
Connexes: stackoverflow.com/questions/16600479/… = comment autoriser uniquement la sélection de certains éléments enfants
JK.
9
Il y a un bug dans certains navigateurs où "Sélectionner tout" (CTRL + A et CMD + A) sélectionne toujours des choses. Cela peut être combattu avec une couleur de sélection transparente: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
DaAwesomeP
12
Puis-je dire simplement: ne faites pas ça. D'après mon expérience, je souhaite le plus souvent sélectionner un texte qui sert également de bouton, pour le copier-coller ailleurs. Il serait incroyablement exaspérant de ne pas être en mesure de le faire, car certains développeurs Web ont fait tout leur possible pour désactiver cette fonctionnalité à ma place. Donc, s'il vous plaît, ne faites pas cela à moins d'avoir une très, très bonne raison.
kajacx
3
En l' an 2017, il est mieux d'utiliser postcsset autoprefixeret de la version du navigateur, puis postcssfaire tout cool.
AmerllicA

Réponses:

7324

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 .

Blowsie
la source
38
joli code molokoloco: D, même si personnellement je resterais bien loin de l'utiliser, car parfois vous pouvez avoir besoin de valeurs différentes pour différents navigateurs, et il repose sur JavaScript. Faire une classe et l'ajouter à votre élément ou appliquer le CSS à votre type d'élément dans votre feuille de style est assez à l'épreuve des balles.
Blowsie
58
'user-select'- Valeurs: aucune | texte | basculer | élément | éléments | tout | inherit
Blowsie
34
En fait, -o-user-select n'est pas implémenté dans Opera. Il implémente plutôt l'attribut non sélectionnable d'IE.
Tim Down du
30
Pour une raison quelconque, cela seul ne fonctionnait pas dans IE8, j'ai ensuite ajouté <div onselectstart="return false;">à ma div principale.
robasta
308
c'est ridicule! tant de façons différentes de faire la même chose. faisons une nouvelle norme pour les sélections des utilisateurs. nous l'appellerons standard-user-select. alors nous n'aurons pas ces problèmes. bien que pour une compatibilité ascendante, nous devrions également inclure les autres. alors maintenant le code devient -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ah, beaucoup mieux.
Claudiu
854

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.

Tim Down
la source
30
vous devriez supprimer le sélecteur * de votre exemple, c'est vraiment inefficace et il n'y a vraiment pas besoin de l'utiliser dans votre exemple, n'est-ce pas?
Blowsie
66
@Blowsie: Je ne pense pas: la spécification CSS 2 indique cela *.fooet.foo sont précisément équivalentes (dans le deuxième cas, le sélecteur universel ( *) est implicite), donc à l'exception des bizarreries du navigateur, je ne vois pas que l'inclusion de la *volonté nuira performance. C'est une habitude de longue date que j'inclus le *, ce que j'ai commencé à faire pour la lisibilité: il indique explicitement en un coup d'œil que l'auteur a l'intention de faire correspondre tous les éléments.
Tim Down le
38
oooh après quelques lectures supplémentaires, il semble que * ne soit inefficace que lorsque vous l'utilisez comme clé (le sélecteur le plus à droite), c'est-à-dire .unselectable *. Plus d'informations ici code.google.com/speed/page-speed/docs/…
Blowsie
20
Au lieu d'utiliser la classe = "unselectable", utilisez simplement le sélecteur d'attribut [unselectable = "on"] {…}
Chris Calo
13
@Francisc: Non. Comme je l'ai dit à Blowsie plus tôt dans les commentaires, cela ne fait précisément aucune différence.
Tim Down le
196

Une solution JavaScript pour Internet Explorer est:

onselectstart="return false;"
Pekka
la source
55
N'oubliez pas ondragstart!
Mathias Bynens
9
encore une chose ici. Si vous ajoutez cela au corps, vous ne pourrez pas sélectionner de texte dans des zones de texte ou des champs de saisie dans IE. La façon dont je l'ai corrigé pour IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
TheBrain
2
Cela peut être ajouté en tant qu'attribut à l'aide de jQuery - $ ("p"). Attr ("onselectstart", "return false") C'était la seule méthode fiable pour moi dans IE8
Matt
13
@Abudayah parce qu'ils ne fonctionnent pas dans les anciennes versions d'Internet Explorer? C'est, comme, le point entier de cette réponse.
Pekka
?? je peux toujours sélectionner du texte dans les inputéléments même si j'utilise user-select: none. j'ai besoin de savoir comment éviter cela
oldboy
191

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.

X-Istence
la source
20
La chose des boutons serait exactement ma motivation.
Kriem
27
Une autre raison pour laquelle cela est nécessaire est un clic Maj pour sélectionner plusieurs lignes dans une grille ou un tableau. Vous ne voulez pas mettre en surbrillance le texte, vous voulez qu'il sélectionne les lignes.
Gordon Tucker
7
Il existe également des problèmes juridiques lorsque le contenu de quelqu'un d'autre est republié légalement, mais une clause de la licence oblige les éditeurs Web à empêcher le texte d'être facilement copié et collé. C'est ce qui m'a amené à trouver cette question. Je ne suis pas d'accord avec l'exigence mais l'entreprise pour laquelle je contracte est légalement tenue de la mettre en œuvre de cette façon.
Craig M
5
@CraigM Le style css n'empêche pas une personne de saisir la source HTML et de la copier. Si vous souhaitez protéger votre contenu, vous devrez trouver de meilleurs moyens.
Agile Jedi
27
Application Web hautement interactive avec beaucoup de glisser-déposer ... la mise en évidence accidentelle est un gros problème d'utilisation.
Marc Hughes
138

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;
}
Benjamin Crouzier
la source
12
Assurez-vous également de rendre les champs de saisie sélectionnables: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
joshuadelange
11
Soyez très prudent lorsque vous désactivez les attentes de l'interface utilisateur du navigateur sur TOUS les codes, sauf pour un élément. Qu'en est-il des éléments de liste <li /> texte, par exemple?
Jason T Featheringham,
Juste une mise à jour ... selon MDN depuis Firefox 21 -moz-noneet ce nonesont les mêmes.
Kevin Fegan
2
Pour cela, vous pouvez ajouter le curseur: par défaut et le curseur: texte respectivement
:)
LA bombe. C'est-à-dire. LA FIN. ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[sélectionne tout dans une liste non ordonnée, et la rend non sélectionnable, plutôt que de mettre à la corbeille tout l'arborescence de la vue.] Merci pour la leçon. Ma liste de boutons a fière allure et répond correctement au tapotement d'écran et à la pression, plutôt que de lancer un IME (widgets du presse-papiers Android).
Hypersoft Systems
125

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.

ZECTBynmo
la source
"Plat" par opposition à quoi?
kojow7
@ kojow7 Par opposition à "en couches". Au lieu de texte flottant au-dessus des autres éléments. Il est similaire à la différence entre les images SVG et PNG.
Yeti
4
J'ai été surpris de découvrir que Firefox nécessite toujours le préfixe du fournisseur en 2019. J'ai utilisé indifféremment uniquement user-select: none;, pensant que la norme serait adoptée à ce jour, mais malheureusement ce n'est pas le cas. Vous fait vous demander ce que les membres du comité des normes pourraient encore débattre. "Non, vous les gars ... Je pense vraiment que ça devrait être user-select: cant;parce que c'est comme plus descriptif, vous savez?" "Nous en avons déjà parlé, Mike. Nous devrions omettre l'apostrophe, et c'est une mauvaise forme!" "Assez, tout le monde! Nous débattrons à nouveau de cette question le mois prochain. La réunion du Comité des normes est ajournée!"
Mentalist
109

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

::selection { background: transparent; }
::-moz-selection { background: transparent; }
seanmonstar
la source
121
Je ne recommanderais pas de faire cela, car cela ne résout pas réellement le problème; désactiver la sélection de texte - il le masque simplement. Cela peut entraîner une mauvaise utilisation, car si je fais glisser mon curseur sur la page, je pourrais sélectionner n'importe quel texte arbitraire sans le savoir. Cela peut provoquer toutes sortes de "bugs" d'utilisation étranges.
Keithamus
1
Ne fonctionne pas sur les images PNG avec des zones transparentes: La sélection s'effectue toujours en bleu clair… Une solution?
AvL
80

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.

Alex
la source
1
L'utilisation transparentde lieu de rgba fonctionne également dans Chrome 42 sur Android.
Clint Pachl
77

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.

Tom Auger
la source
5
Utilisez -ms-user-select: aucun; (pour IE10) et votre jQuery "if" devrait être ceci: if (($ .browser.msie && $ .browser.version <10) || $ .browser.opera)
mhenry1384
Soyez prudent homme !!! Pour le rendre sélectionnable dans Firefox, vous devez utiliser-moz-user-select: Normal;
Nicolas Thery
7
@ mhenry1384 jQuery.browserest obsolète depuis la version 1.3 et a été supprimé dans la version 1.9 - api.jquery.com/jQuery.browser
WynandB
@Wynand Bon point. Mais quelle sorte de "détection de fonctionnalité" existe pour déterminer quelle propriété CSS utiliser?
Tom Auger
@TomAuger Vous pouvez utiliser jQuery.support, il vous permet de vérifier les fonctionnalités uniques: Lien
Aequanox
69

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

Ale
la source
3
Vous pouvez également utiliser titlecomme attribut.
Brosse à dents
6
C'est une solution très créative. Surtout s'il utilisait l'attribut title car ce serait probablement mieux pour les lecteurs d'écran.
pseudosavant
4
Je l'ai essayé ( JSBin ) et cela ne fonctionne pas dans IE. Malheureusement, les IE plus anciens sont les seuls qui user-selectne fonctionnent pas.
pseudosavant
1
Il s'agit d'une excellente alternative non JS qui fonctionne dans Chrome! Impressionnant!
saricden
magnifique! ......
Lonely
69

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>

Alireza
la source
59

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  */
}
Elad Shechter
la source
3
Cela fonctionne dans IE tant que la sélection commence sur un élément avec la classNameclasse. Voir ce JSBin .
pseudosavant
57

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;
}
user1012506
la source
51

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  */
}
Kaz
la source
48

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;
}
Beep.exe
la source
46

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

.user-select(none);
Codler
la source
46
-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');
Gaurang
la source
46

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.

suraj rawat
la source
La propriété CSS non préfixée doit être strictement à la fin de la liste des versions préfixées de la propriété. C'est une bonne pratique, une autre est une mauvaise pratique de créer un "nouvel IE" à partir de Chrome / Webkit et conduisant à tant de choses laides que d'introduire la prise en charge du préfixe -webkit dans les navigateurs non Webkit. Regardez, c'était déjà en 2012: dev.opera.com/articles/…
FlameStorm
Et je cite:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.
FlameStorm
42

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 .

Ale_info
la source
36

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.

hbw
la source
Bien que je convienne que cela change le comportement que l'utilisateur attend, cela aurait du sens pour des choses comme le bouton "Ajouter un commentaire" qui se trouve à côté de ce champ de formulaire ...
X-Istence
Mais cela n'expose-t-il pas des détails d'implémentation inutiles? Le texte d'une entrée ou d'un bouton ne peut pas être sélectionné.
@anon: La plupart des utilisateurs n'essaieront probablement pas de sélectionner le texte de votre bouton, donc en pratique, cela ne devrait pas vraiment avoir beaucoup d'importance. De plus, pour ce faire, ils devront commencer à sélectionner en dehors du bouton - s'ils cliquent à l'intérieur du bouton lui-même, le gestionnaire onclick s'activera à la place. De plus, certains navigateurs (par exemple Safari) vous permettent en fait de sélectionner le texte des boutons normaux…
hbw
6
Si vous sélectionnez un ensemble de commentaires à partir d'un fil de discussion et que chaque commentaire a un bouton de vote positif / négatif à côté, il serait bien de sélectionner le texte sans les autres éléments. C'est ce que l'utilisateur attend ou veut. Il ne veut pas copier / coller les étiquettes des boutons avec chaque commentaire.
Mnebuerquo
2
Et si par exemple vous double-cliquez sur un bouton qui au lieu de vous rediriger vers une autre page ouvre une div? alors le texte du bouton sera sélectionné en raison du double-clic!
Gigala
34

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.

r3wt
la source
3
Il y a peu de choses qui peuvent être connues avec certitude, mais cette solution ne fonctionne certainement pas dans tous les navigateurs.
Volker E.
33

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.

Gaurav Aggarwal
la source
30

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.

karthipan raj
la source
1
Faites ça color: inherit;peut - être.
Yaakov Ainspan
Yeah j'aime ça. C'est le sélecteur CSS niveau 3 selon les documents de Mozilla
Bariq Dharmawan
29

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

onmousedown='return false;' 
onselectstart='return false;'
JIT1986
la source
28

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

Avant d'avoir sélectionné quoi que ce soit

Après avoir sélectionné

Les numéros ont été copiés

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.

Luke Madhanga
la source
1
J'ai eu le même problème. Sur Mac Chrome 48.0.2564.116 et sur Mac Safari 9.0.3. Notamment, Mac Firefox 43.0 ne copie pas le personnage, mais colle des lignes de fond supplémentaires entre eux. Que faut-il faire à ce sujet?
NHDaly
26

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;
}
SemanticZen
la source
finalyyyyyyy une réponse qui fonctionne
oldboy
23

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.

codeWithMe
la source
21

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/

apocalypse
la source
21

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

Suraj Naik
la source
Cela doit être la raison pour laquelle l'auto-complétion Netbeans n'a aucune idée de ce dont je parle!
halfer le