Desactivar el resaltado del contorno naranja en el enfoque

Tratar:

 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; // ie Nexus5/Chrome and Kindle Fire HD 7'' 

 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 

En su archivo css. Funcionó para mí!

Trabajo en Android predeterminado, Android Chrome e iOS Safari 100%

 * { -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; outline: none !important; } 

Quite el cuadro naranja en el foco de entrada para Androids

 textarea:focus, input:focus{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-modify: read-write-plaintext-only; } 

Tap-highlight-color para la mayoría de las versiones

User-modify para 4.0.4

Prueba para Focus Line

 body, textarea:focus, input:focus{ outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } 

Tenga en cuenta que el uso de este CSS -webkit-user-modify: read-write-plaintext-only; Quitará ese "bug" de resaltar horrible – pero puede matar la capacidad de sus dispositivos para proporcionar un teclado específico. Para nosotros con Android 4.0.3 en un Samsung Tab 2, ya no podíamos obtener el teclado numérico. Incluso usando type = 'number' y / o type = 'tel'. ¡Muy frustrante! BTW, establecer el color de resaltado del grifo no hizo nada para resolver este problema para este dispositivo y configuración del sistema operativo. Estamos ejecutando Safari para Android.

Para asegurarse de que la propiedad principal de tap-highlight-color funcione para usted, considere primero estas cosas:

No funciona:
-webkit-user-modify: read-write-plaintext-only;
// Algunas veces activa el teclado nativo para que aparezca al hacer clic en el elemento

.class: active, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// No funciona si está definido para estados

Trabajando:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

Este caso funciona para Android de v2.3 a v4.x incluso en una aplicación PhongeGap. Lo probé en Galaxy Y con Android 2.3.3, en Nexus 4 con Android 4.2.2 y en Galaxy Note 2 con Android 4.1.2. Por lo tanto , no lo defina para estados solo para el elemento mismo.

Utilice el siguiente código en el archivo CSS

  * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :focus { outline: 0; border:none; color: rgba(0, 0, 0, 0); } 

Es trabajo para mí. Espero que funcione para usted.

Esto no funcionó para mí en los enlaces de Mapa de Mapa de Imagen, la única solución de trabajo era usar javascript capturando el evento ontouchend y evitando el comportamiento predeterminado del navegador devolviendo false en el manejador.

Con jQuery:

 $("map area").on("touchend", function() { return false; }); 

Sólo quería compartir mi experiencia. Realmente no conseguí que esto funcionara, y quería evitar el lento css- *. Mi solución fue descargar el viejo Eric Meyer's Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) y añadir este a mi proyecto de phonegap. A continuación, añadió:

 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /** Disable orange highlight */ 

En mi experiencia este es un acercamiento más rápido al *, pero es también un acercamiento a los insectos menos extraños. La combinación de tap-highlight, -webkit-user-modify: read-write-plaintext-only y la desactivación de, por ejemplo, resaltado de texto nos han proporcionado un montón de caras. Uno de los peores es que de repente la entrada de teclado deja de funcionar y la visualización del teclado lento.

Completo CSS-reset con el naranja resaltado desactivado:

 /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /** Disable orange highlight */ } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } 

He intentado este y trabajado muy bien: –

HTML: –

 <a class="html5logo" href="javascript:void(0);" ontouchstart="return true;"></a> 

Css

 .html5logo { display: block; width: 128px; height: 128px; background: url(/img/html5-badge-128.png) no-repeat; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids */ } .html5logo:active { -webkit-transform: scale3d(0.9, 0.9, 1); } 

Esto funcionará no sólo para los grifos, pero también flotará:

 button, button:hover, li:hover, a:hover , li , a , *:hover, * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } 

Si el diseño no utiliza esquemas, esto debería hacer el trabajo:

 *, *::active, *::focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important; -webkit-focus-ring-color: rgba(0, 0, 0, 0)!important; outline: none!important; } 

 <EditText android:id="@+id/edittext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background_normal" /> 

Pruebe el código siguiente que deshabilite el contorno de borde

Esquema: ninguno! Importante;