De todos modos, ¿para evitar el resaltado azul de elementos en Chrome al hacer clic rápidamente?

123

La mayoría de las veces no me preocupa, pero tengo un carrusel de imágenes y si hago clic en los divs siguiente y anterior rápidamente, se resaltarán en Chrome.

Intenté usar esquema: ninguno pero sin efecto. ¿Hay alguna solución por ahí?

css google-chrome Herrero
fuente
No veo este efecto en la versión actual de Chrome
Billal Begueradj
Sé que su caso de uso es diferente, pero para cualquier otra persona que desee eliminarlo de todos los enlaces, no se lo recomiendo. Intenté eliminarlo en una PWA, pero sin los comentarios visuales, la percepción del usuario es que la aplicación es más lenta.
collimarco

Respuestas:

170

Además del enlace proporcionado por Floremin , que borra la selección de texto usando JavaScript para "borrar" la selección, también puede usar CSS puro para lograr esto. El CSS está aquí ...

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

Simplemente agregue el class="noSelect"atributo al elemento al que desea aplicar esta clase. Recomiendo encarecidamente probar esta solución CSS. No hay nada de malo en usar JavaScript, solo creo que esto podría ser potencialmente más fácil y limpiar un poco las cosas en su código.

Chrome en Android -webkit-tap-highlight-color: transparent; es una regla adicional con la que puede experimentar para obtener soporte en Android.

smts
fuente
1
Solo para Chrome, probablemente solo necesite user-selecty webkit-user-select.
smts
Esta es la solución con la que voy, ya que solo tengo el problema de resaltado en Chrome y funciona muy bien. ¡Gracias a todos los que participaron!
Smith
36
No se pudo hacer que funcione con Chrome en Android. Tuve que usar-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Iwazaru
25
-webkit-tap-highlight-color: transparent; es la parte clave en Chrome
FisNaN
Para Chrome en Android -webkit-tap-highlight-color: transparente; - ¡Funcionó para mí, gracias!
CK Munn
213

Para Chrome en Android, puede usar la propiedad CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color es una propiedad CSS no estándar que establece el color del resaltado que aparece sobre un enlace mientras se toca. El resaltado indica al usuario que su toque se está reconociendo correctamente e indica en qué elemento está tocando.

Para eliminar el resaltado por completo, puede establecer el valor en transparent:

-webkit-tap-highlight-color: transparent;

Tenga en cuenta que esto podría tener consecuencias en la accesibilidad: consulte outlinenone.com

Iwazaru
fuente
4
Descubrí que cuando se ejecuta en una pantalla táctil, por ejemplo, Chrome se comportará de manera muy similar a como lo hace en Android. Tenía un <div> que parpadeaba en azul cada vez que hacía clic en algún lugar dentro de él. Solo cuando usé esta respuesta se detuvo. ¡Gracias!
Valorum
2
Ninguno de los otros attys css hará esto. Tan importante ya que el resaltado del toque distorsiona la apariencia de cualquier cosa en la que se haga clic, arrastrando su lenguaje visual.
Dominic Cerisano
23
-webkit-tap-highlight-color: transparent;parece funcionar también.
Bernard
1
¡Me gustó esto, para eventos táctiles es imprescindible! Esta información tiene una utilidad "fuera de la tabla".
Berker Yüceer
1
Esta es la solución que funcionó para mí en 2020
Blue Bot
66

Estoy ejecutando la versión 60 de Chrome y ninguna de las respuestas CSS anteriores funcionó.

Descubrí que Chrome estaba agregando el resaltado azul a través del outlineestilo. Agregar el siguiente CSS lo solucionó para mí:

:focus {
    outline: none !important;
}
Jeff L.
fuente
5
usted, señor, es un salvavidas.
beckah
2
este es el que funciona para Chrome (versión 61) en Android
Stefan
Funciona para versiones más recientes de Chrome. ¡Gracias!
CrazedCoder
Súper, se preguntaba por qué mi fiel user-select:noneconseguía nada
Sean T
Intenté todo, pero esto funcionó a la perfección. ¡Gracias por salvarme los pelos!
Avinash Kumar
25

Pero, a veces, incluso con user-selecty touch-calloutapagado, cursor: pointer;puede causar este efecto, por lo tanto, simplemente configúrelo cursor: default;y funcionará.

Gustavo B.
fuente
7
Esta es una respuesta correcta, cursor: pointer;realmente está causando resaltado. Pero -webkit-tap-highlight-color: transparent;es una solución más universal.
Yanot
1
@yanot: lea la advertencia -webkit-tap-highlight-colorantes de etiquetarla como una solución relativamente universal : developer.mozilla.org/en-US/docs/Web/CSS/…
Hassan Baig
@HassanBaig Creo que es obvio que no me refiero a un navegador cruzado universal , sino en este contexto, es decir, en diferentes versiones de Chrome
yanot
2
gracias, ninguna de las otras soluciones funcionó para mí. Tuve que quitar el puntero del cursor para que desapareciera el resaltado azul
RVP
3
cursor: defaulthizo el truco para mí cuando nada más funcionó.
Telarian
-2

Intente crear un controlador para el evento de selección en esos elementos y en el controlador puede borrar la selección.

Mira esto:

Selección de texto claro con JavaScript

Es un ejemplo de cómo borrar la selección. Solo necesitaría modificarlo para que funcione solo en el elemento específico que necesita.

Floremin
fuente
Entonces, CSS no puede solucionarlo, ¿eh? ¿Puedo borrar el texto seleccionado dentro de mi controlador de clics? EDITAR- Gracias por el ejemplo. Esto apesta que tiene que ser manejado a través de javascript. Esperaba que fuera solo un problema de CSS.
Smith
Además, ¿esto tendrá algún impacto en la accesibilidad?
Smith
Puede borrar el texto en el controlador de clic, pero eche un vistazo a la respuesta de @smts con CSS puro.
Floremin
-8

Esto funciona mejor para mí:

.noSelect:hover {
  background-color: white;
}
nagy.zsolt.hun
fuente
6
Esto es MALO y un camino hacia un futuro infierno. Sin ofender.
Mike Barwick
¿Qué pasa si el fondo del sitio web no es blanco?
rideon88
Esto no se puede mantener. Nadie haga esto por favor.
Telarian