J'ai cet élément div avec une image d'arrière-plan et je veux arrêter de mettre en évidence l'élément div lorsque vous double-cliquez dessus. Existe-t-il une propriété CSS pour cela?
J'ai cet élément div avec une image d'arrière-plan et je veux arrêter de mettre en évidence l'élément div lorsque vous double-cliquez dessus. Existe-t-il une propriété CSS pour cela?
Réponses:
Le CSS ci-dessous empêche les utilisateurs de sélectionner du texte. Exemple en direct: http://jsfiddle.net/hGTwu/20/
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
Pour cibler IE9 vers le bas et Opera, l'attribut html unselectable
doit être utilisé à la place:
<div unselectable="on">Test Text</div>
unselectable
attribut. Il n'y a pas -o-user-select
, au fait.
@include user-select(none);
au lieu d'utiliser le CSS brut
draggable = false
, mais uniquement sur Firefox.
Cela fonctionne pour moi
html
{
-webkit-tap-highlight-color:transparent;
}
J'essayais de trouver une solution pour arrêter la mise en évidence des div dans Chrome et je me suis tourné vers ce post. Mais, malheureusement, aucune des réponses n'a résolu mon problème.
Après de nombreuses recherches en ligne, j'ai trouvé que le correctif était quelque chose de très simple. Il n'y a pas besoin de CSS complexe. Ajoutez simplement le CSS suivant à votre page Web et vous êtes prêt. Cela fonctionne aussi bien sur les ordinateurs portables que sur les écrans mobiles.
div { outline-style:none;}
REMARQUE : cela a fonctionné dans la version Chrome 44.0.2403.155 m. En outre, il est pris en charge dans tous les principaux navigateurs d'aujourd'hui, comme expliqué à cette URL: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style
Je ne suis pas un expert CSS, mais je pense que vous pouvez utiliser la réponse de tw16 tant que vous augmentez le nombre d'éléments affectés. Par exemple, cela empêche de mettre en surbrillance partout sur ma page sans affecter aucun autre type d'interactivité:
*, *:before, *:after {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
Cette première ligne est une gracieuseté de Paul Irish (via http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).
div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
::-moz-selection { background:transparent; }
::selection { background:transparent; }
désactiver la sélection de l'utilisateur:
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
définir l'arrière-plan transparent pour l'élément sélectionné:
div::-moz-selection { background:transparent; }
div::selection { background:transparent; }