Comment désactiver la sélection de texte en surbrillance?
Pour les ancres agissant comme des boutons (par exemple, Questions , Balises , Utilisateurs , etc. en haut de la page Dépassement de pile) ou des onglets, existe-t-il un moyen standard de désactiver CSS 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'option -moz-user-select réservée à Mozilla.
Existe-t-il un moyen conforme à la norme pour réaliser cela avec CSS, et si non, quelle est la "meilleure pratique"?
UPDATE January 2017:
Selon Puis-je utiliser , le user-select est actuellement pris en charge par tous les navigateurs sauf Internet Explorer 9 et les versions antérieures (mais malheureusement toujours nécessite un préfixe de fournisseur).
Toutes les variations 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 qu'il s'agit d'une fonctionnalité non standard (c'est-à-dire qu'elle ne fait partie d'aucune spécification). Son fonctionnement n’est pas garanti partout et il peut y avoir des différences de mise en œuvre entre les navigateurs et, à l’avenir, les navigateurs peuvent abandonner toute prise en charge.
Vous trouverez plus d’informations dans Documentation de Mozilla Developer Network .
Dans la plupart des navigateurs, cela peut être réalisé à l'aide de variations propriétaires de la propriété CSS user-select, proposée à l'origine, puis abandonnée dans CSS3 et maintenant proposée dans CSS UI Level 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 l'attribut unselectable de l'élément que vous souhaitez désélectionner. 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 insérer un attribut dans la balise de début de chaque élément du <div>. Si cela pose un problème, vous pouvez utiliser JavaScript pour le faire 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 ajoutant 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 commençant avant et se terminant après l'élément non sélectionnable sans rendre le document entier non sélectionnable.
Une solution JavaScript pour IE est
onselectstart="return false;"
Jusqu'à ce que la propriété sélection par l'utilisateur de CSS 3 devienne disponible, les navigateurs basés sur Gecko - prennent en charge la propriété -moz-user-select que vous avez déjà trouvée. Les navigateurs WebKit et Blink prennent en charge la propriété -webkit-user-select.
Ceci n'est bien sûr pas pris en charge par les navigateurs qui n'utilisent pas le moteur de rendu Gecko.
Il n’existe pas de moyen rapide et facile, conforme aux normes, de le faire; utiliser JavaScript est une option.
La vraie question est la suivante: pourquoi voulez-vous que les utilisateurs ne puissent pas mettre en surbrillance et probablement copier et coller certains éléments? Je ne suis pas tombé sur une seule fois pour 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 ou pour fournir un marqueur afin que leurs yeux sachent où regarder ensuite.
Le seul endroit où cela pourrait être utile, c’est si vous avez des boutons pour les formulaires qui ne doivent pas être copiés et collés si un utilisateur copié et collé le site Web.
Si vous souhaitez désactiver la sélection de texte sur tout sauf les éléments <p>, vous pouvez le faire en CSS (surveillez le -moz-none qui autorise la substitution dans des 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 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 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 de <div class="draggable"></div> non sélectionnables, utilisez ce CSS:
.draggable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-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 bloc $(document).ready():
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 puissent être interactifs, d’où le pseudo-sélecteur :not(). Vous pouvez utiliser '*' à la place si vous ne vous en souciez pas.
Avertissement: IE9 n'a peut-être pas besoin de cette pièce jQuery supplémentaire, vous pouvez donc 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 la meilleure façon, cependant.
Vous pouvez utiliserCSSou JavaScript pour cela, JavaScript way est supporté par les anciens navigateurs comme les anciens IE, mais si ce n'est pas votre cas, utilisez la méthode CSS alors:
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, vous devez en outre ajouter pseudo class focus (.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;/*IE*/
}
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.
-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');
Pour ceux qui ont des difficultés à 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;
}
Essayez d'insérer ces lignes dans CSS et appelez la propriété "disHighlight" at à la 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;
}
Mis à part la propriété Mozilla-only, non, il n'y a aucun moyen de désactiver la sélection de texte avec uniquement du CSS standard (à partir de maintenant).
Si vous remarquez que Stack Overflow ne désactive pas la sélection de texte pour leurs boutons de navigation, je vous déconseille de le faire dans la plupart des cas, car cela modifie le comportement de sélection normal et le rend incompatible avec les attentes de l'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 ait deux div comme celle-ci
.second {
cursor: default;
user-select: none;
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE/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>Définit le curseur sur default pour donner à l’utilisateur une impression non sélectionnable /
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; }
... toutes les autres corrections de navigateur. Cela fonctionnera dans Internet Explorer 9 ou plus tard.
Ajoutez ceci au premier div dans lequel vous voulez désactiver la sélection pour le texte:
onmousedown='return false;'
onselectstart='return false;'
REMARQUE:
La bonne réponse est correcte car elle vous empêche de sélectionner le texte. Cependant, cela ne vous empêche pas de pouvoir copier le texte, comme je le montrerai avec les quelques captures d'écran suivantes (à partir du 7 novembre 2014).
Comme vous pouvez le constater, 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, il fallait utiliser à la fois ::selection et user-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;
}
Ce n'est pas CSS, mais ça vaut la peine d'être mentionné:
Sélection de désactivation de l'interface utilisateur jQuery :
$("your.selector").disableSelection();
Vérifier ma solution sans JavaScript:
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 fût dans les brouillons de CSS Selectors Level 3, il a été supprimé lors de la phase de recommandation du candidat, car il est apparu que son comportement était sous-spécifié, en particulier avec des éléments imbriqués, et que l'interopérabilité n'avait pas été réalisée.
On en discute dans - Comment :: selection fonctionne sur des éléments imbriqués.
Bien qu'il soit implémenté dans le navigateur, vous pouvez créer une illusion de texte non sélectionné en utilisant la même couleur et la même couleur d'arrière-plan pour la sélection que pour 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; }
Refuser aux utilisateurs de sélectionner le texte soulèvera des problèmes d’utilisabilité.
Mise à jour rapide du hack: Mars 2017 -de Astuces CSS
Si vous définissez la valeur "none" pour tous les attributs de sélection d'utilisateur CSS, comme indiqué ci-dessous, vous pouvez toujours rencontrer un problème.
.div{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
Comme CSS-Trick dit que le problème est
- WebKit permet toujours de copier le texte si vous sélectionnez des éléments autour de.
Ainsi, vous pouvez également utiliser celui ci-dessous à la place pour faire en sorte qu'un élément entier soit sélectionné, ce qui constitue la solution au problème. Tout ce que vous avez à faire est de changer la valeur "none" en "all" qui ressemble à ceci
.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 */
}
J'ai appris de CSS-Tricks website.
user-select: none;
Et cela aussi:
::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
Facilement fait avec:
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
alternativement:
Supposons que vous avez un <h1 id="example">Hello, World!</h1>. Ce que vous devez faire est de supprimer le innerHTML de ce h1: dans ce cas Hello, World . Ensuite, vous devrez aller en CSS et faire ceci:
#example::before //You can ofc 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 que c'est un élément de bloc et non un texte.
Essayez d'utiliser celui-ci:
::selection {
background: transparent;
}
Et si vous souhaitez spécifier de ne pas sélectionner dans un élément spécifique, il suffit de placer la classe ou l'id de l'élément avant la règle de sélection, tel que:
.ClassNAME::selection {
background: transparent;
}
#IdNAME::selection {
background: transparent;
}
Cet effet de surbrillance est dû à l'action appelée survol (onMouseHover) . Lorsque vous passez le curseur sur un onglet, sa couleur change.
<div class="menu">
<ul class="effect">
<li>Questions </li>
<li>JOBS </li>
<li>Users</li>
</ul>
</div>
<!-- CSS CODE -->
.effect:hover{
color: none;
}
Vous pouvez donner n'importe quelle couleur si vous voulez la mettre en surbrillance, sinon vous ne pouvez en donner aucune.
Vous pouvez utiliser la propriété Sélection par l'utilisateur comme ci-dessous pour cela.
p {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Si vous souhaitez désactiver la sélection et la mise en surbrillance de toute la page, vous pouvez facilement le faire avec css
* {
-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 */
}
Avec CSS-
div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
"unselectable='on' onselectstart="return false;"
onmousedown="return false;
}<div>
Blabla
<br/> More Blabla
<br/> More Blabla...
</div>Mieux encore, vous pouvez désactiver la sélection de texte.
si vous aimez SASS (SCSS) et que vous ne voulez pas utiliser de boussole, vous pouvez le faire
styles.scss
@mixin user-select($select) {
-webkit-touch-callout:#{$select};
@each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
#{$pre + user-select}: #{$select};
}
#{user-select}: #{$select};
}
.no-select {
@include user-select(none);
}
J'ai combiné les différents css du navigateur avec la balise non sélectionnable requise pour IE <9.
<style>
[unselectable="on"] {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
Peut-être que vous pouvez utiliser cette solution: avant
nav li {
display: inline-block;
position: relative;
}
nav li a {
display: inline-block;
padding: 10px 20px;
}
nav li a:hover {
color: red;
}
nav li.disabled:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}<nav>
<ul>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/
:: selection {background: transparent; couleur: transparent;}
:: - moz-selection {background: transparent; couleur: transparent;}
Vous pouvez également vouloir empêcher le menu contextuel d'apparaître lorsque vous touchez des éléments tels que des boutons dont la sélection est empêchée. Pour ce faire, ajoutez ce code à la page entière, ou simplement aux éléments de bouton suivants:
$("body").on("contextmenu",function(e){
return false;
});