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.

— Ulad Kasach
fuente

118

-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

Se encarga del problema, ya que establece el color de resaltado transparente.

Fuente: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

— Ulad Kasach
fuente

6

-webkit-tap-highlight-color: transparent;también está bien.

— Neil Morgan

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