Comment arrêter la mise en évidence d'un élément div lors d'un double-clic

91

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?

css xhtml tags highlighting double-click Dave
la source
Dans quel navigateur êtes-vous? Lors de mes tests, je n'ai pas pu mettre en évidence un div entier dans Firefox 5, Chrome 12 ou IE9.
tw16

Réponses:

154

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 unselectabledoit être utilisé à la place:

<div unselectable="on">Test Text</div>
tw16
la source
cela n'a pas empêché le div entier d'être mis en évidence. J'ai remarqué que c'était uniquement pour le texte. Je veux éviter que le div entier ne soit mis en surbrillance lorsque vous double-cliquez dessus.
dave
@dave: J'ai supposé que la seule fois que le double-clic provoquait une mise en évidence, c'était lorsqu'il y avait du texte dedans, c'est ce que vous vouliez dire. Pas besoin de voter contre.
tw16
1
Ne fonctionne pas dans IE ou Opera. Vous avez besoin de l' unselectableattribut. Il n'y a pas -o-user-select, au fait.
Tim Down
note pour les utilisateurs SASS / SCSS: vous pouvez @include user-select(none);au lieu d'utiliser le CSS brut
hilnius
Étrangement, cela a rendu les divs pouvant être déplacés même quand draggable = false, mais uniquement sur Firefox.
rovyko
51

Cela fonctionne pour moi

html
{
  -webkit-tap-highlight-color:transparent;
}
Hans
la source
Cela devrait être la meilleure réponse.
JohnA10
11
Cela ne sera pertinent que pour les navigateurs Webkit tels que Chrome et Safari, et ne fonctionnera probablement dans aucune version d'IE ou de Firefox.
Simon East
30

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

Sunil
la source
8

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

SterlingVix
la source
N'utilisez jamais ce CSS lorsque vous avez une PWA sur iOS 13, cela bloque complètement le clavier.
Fer
2

Ciblez tous les éléments div:

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

Ciblez tous les éléments:

::-moz-selection { background:transparent; }
::selection { background:transparent; }
Jasonleonhard
la source
1

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; }
Jin.
la source
3
Bien que cet extrait de code puisse résoudre la question, inclure une explication contribue vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
msrd0
0

Si un élément est cliquable, vous souhaiterez peut-être en faire un élément bouton.

Medda86
la source