Cómo dejar de resaltar un elemento div al hacer doble clic

93

Tengo este elemento div con una imagen de fondo y quiero dejar de resaltar en el elemento div al hacer doble clic en él. ¿Existe una propiedad CSS para esto?

css xhtml tags highlighting double-click Dave
fuente
¿En qué navegador estás? En mis pruebas, no pude obtener un div completo para resaltar en Firefox 5, Chrome 12 o IE9.
tw16

Respuestas:

159

El CSS a continuación evita que los usuarios puedan seleccionar texto. Ejemplo en vivo: 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;

Para apuntar IE9 hacia abajo y Opera, se unselectabledebe usar el atributo html en su lugar:

<div unselectable="on">Test Text</div>
tw16
fuente
eso no impidió que se resaltara todo el div. Noté que era solo para mensajes de texto. Quiero evitar que todo el div se resalte al hacer doble clic en él.
dave
@dave: Supuse que, dado que la única vez que el doble clic provocó el resaltado es cuando había texto, eso es lo que querías decir. No hay necesidad de votar en contra.
tw16
1
No funciona en IE u Opera. Necesitas el unselectableatributo. No hay -o-user-select, por cierto.
Tim Down
nota para los usuarios de SASS / SCSS: puede en @include user-select(none);lugar de usar CSS sin procesar
hilnius
Curiosamente, esto hizo que los divs se volvieran arrastrables incluso cuando draggable = false, pero solo en Firefox.
rovyko
53

Esto funciona para mi

html
{
  -webkit-tap-highlight-color:transparent;
}
Hans
fuente
Esta debería ser la mejor respuesta.
JohnA10
11
Esto solo será relevante para navegadores webkit como Chrome y Safari, y probablemente no funcionará en ninguna versión de IE o Firefox.
Simon East
31

Estaba tratando de encontrar una solución para detener el resaltado de div en Chrome y recurrí a esta publicación. Pero, desafortunadamente, ninguna de las respuestas resolvió mi problema.

Después de mucha investigación en línea, descubrí que la solución es algo muy simple. No es necesario ningún CSS complejo. Simplemente agregue el siguiente CSS a su página web y estará listo. Esto funciona tanto en computadoras portátiles como en pantallas de dispositivos móviles.

div { outline-style:none;}

NOTA : Esto funcionó en la versión de Chrome 44.0.2403.155 m. Además, es compatible con todos los principales navegadores de la actualidad, como se explica en esta URL: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

Sunil
fuente
8

No soy un experto en CSS, pero creo que puede usar la respuesta de tw16 siempre que amplíe la cantidad de elementos afectados. Por ejemplo, esto evita resaltar en todas partes de mi página sin afectar ningún otro tipo de interactividad:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

Esa primera línea es cortesía de Paul Irish (a través de http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).

SterlingVix
fuente
Nunca use este CSS cuando tenga una PWA en iOS 13, esto bloquea completamente el teclado.
Fer
2

Apuntar a todos los elementos div:

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

Apuntar a todos los elementos:

::-moz-selection { background:transparent; }
::selection { background:transparent; }
Jasonleonhard
fuente
1

deshabilitar al usuario seleccionando:

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

establecer fondo transparente para el elemento seleccionado:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
Jin.
fuente
3
Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo a la pregunta para los lectores en el futuro, y es posible que esas personas no conozcan los motivos de su sugerencia de código.
msrd0
0

Si se puede hacer clic en un elemento, es posible que desee convertirlo en un elemento de botón.

Medda86
fuente