Deshabilitar el resaltado azul al tocar / presionar un objeto con el cursor: puntero

81

Hay un resaltado azul que aparece siempre que un Div que tiene la propiedad cursor: puntero aplicada se toca en Chrome. ¿Cómo podemos deshacernos de él?

He probado lo siguiente:

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

Pero no afectan el resaltado azul al presionar un cursor.

html css mobile touch highlight Ulad Kasach
fuente

Respuestas:

85

Hasta donde yo sé, la respuesta de Vlad K podría causar problemas en algunos dispositivos Android. Mejor solución:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
Expandir fragmento

Oboo Cheng
fuente
Aclare qué respuesta alternativa de "respuesta anterior"
Nima Derakhshanjan
1
¿Por qué ha usado en rgba(0,0,0,0)lugar dergba(255,255,255,0)
Gaurav Aggarwal
1
@GauravAggarwal El espacio alfa tiene sentido, por lo que no hay diferencia entre rgba (0,0,0,0) y rgba (255,255,255,0). Creo que este es solo un caso. ¿Rgba (255,255,255,0) actúa raro?
Oboo Cheng
4
Si va a anularlo con transparente de todos modos, ¿por qué tener una declaración rgba? ¿Hay versiones de WebKit que de alguna manera no admiten la palabra clave transparente en esta propiedad?
BoltClock
4
@BoltClock. Realmente no puedo encontrar la palabra clave 'transparente' en MDN doc, así que creo que no es estándar. Antes de responder esta pregunta, he leído este artículo , el comentario de ** Christian Cook **, consejo para agregar esto porque él viene en un problema con algún dispositivo sumsung. Creo que es un error de un dispositivo específico.
Oboo Cheng
9

Simplemente agregue esto a su hoja de estilo y simplemente agregue el class="no_highlights"atributo al elemento al que desea aplicar esta clase.

no_highlights{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

o puede hacer esto globalmente para todos los elementos eliminando el nombre de la clase y haciendo esto. 

button,
textarea,
input,
select,
a{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;

}

Gracias :) pero de todos modos. El borde azul está ahí como característica de accesibilidad. Se ve mal, pero ayuda a quien más lo necesitaba.

asith
fuente
0

De acuerdo con los documentos , simplemente puede hacer esto:

-webkit-tap-highlight-color: transparent; /* for removing the highlight */

Me funciona en Chrome 68 para Android y Chrome 80 en Windows.

Eric Mutta
fuente
¿Por qué el voto negativo? Se hizo un comentario sobre la respuesta aceptada el 20 de mayo de 2020. Mi respuesta fue dada anteriormente el 5 de abril de 2020. Dicen exactamente lo mismo, pero esto se rechaza y el comentario se vota a favor. ¿Lo que da?
Eric Mutta