web-dev-qa-db-fra.com

Comment arrêter la mise en surbrillance d'un élément div lorsque vous double-cliquez

J'ai cet élément div avec une image d'arrière-plan et je veux arrêter de mettre en surbrillance l'élément div lorsque je double-clique dessus. Existe-t-il une propriété CSS pour cela?

cssxhtmltagshighlightingdouble-click
76
dave

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>
135
tw16

Ça marche pour moi

html
{
  -webkit-tap-highlight-color:transparent;
}
39
Hans

J'essayais de trouver une solution pour arrêter la mise en surbrillance 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 code CSS suivant à votre page Web et vous êtes tous ensemble. Cela fonctionne dans les ordinateurs portables ainsi que les écrans mobiles.

div { outline-style:none;}

[~ # ~] note [~ # ~] : cela a fonctionné dans Chrome Version 44.0.2403.155 m. Aussi , il est supporté par tous les principaux navigateurs d’aujourd’hui, comme expliqué à l’adresse URL suivante: http://www.w3schools.com/cssref/pr_outline-style.asp

27
Sunil

Je ne suis pas un expert en CSS, mais je pense que vous pouvez utiliser la réponse de tw16 à condition d'augmenter le nombre d'éléments affectés. Par exemple, cela empêche de mettre en évidence 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/ ).

7
SterlingVix

Cible tous les éléments div:

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

Cible tous les éléments:

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

désactiver l'utilisateur en sélectionnant:

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; }
1
Jin.