Desactivar el resaltado de contorno naranja en el foco

Estoy codificando una aplicación usando jQuery, jqTouch y phonegap y me he encontrado con un problema persistente que surge cuando un usuario envía un formulario usando el botón Ir en el teclado virtual.

Aunque es fácil hacer que el cursor se mueva al elemento de entrada del formulario apropiado usando $('#input_element_id').focus(), el resaltado de contorno naranja siempre regresa al último elemento de entrada en el formulario. (El resaltado no aparece cuando el formulario se envía mediante el botón de envío del formulario).

Lo que necesito es encontrar una manera de deshabilitar el resaltado naranja por completo o hacer que se mueva al mismo elemento de entrada que el cursor.

Hasta ahora, he intentado agregar lo siguiente a mi CSS:

.class_id:focus {
    outline: none;
}

Esto funciona en Chrome pero no en el emulador ni en mi teléfono. También intenté editar jqTouch theme.csspara leer:

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

Sin efecto. También probé cada una de las siguientes adiciones al AndroidManifest.xmlarchivo:

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

Ninguno de los cuales tiene ningún efecto.

Actualización: he solucionado más problemas con esto y hasta la fecha he encontrado:

1. La propiedad de esquema solo funciona en Chrome, no en el navegador de Android.

2. De hecho, la -webkit-tap-highlight-colorpropiedad funciona en el navegador de Android, aunque no en Chrome. Deshabilita el resaltado al enfocar y al tocar.

3. La -webkit-focus-ring-colorpropiedad no parece funcionar en ningún navegador.

Tratar:

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

Funciona en Android Default, Android Chrome y 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;
} 

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

en su archivo css. ¡Funcionó para mí!

Quite el cuadro naranja en el foco de entrada para Android

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

modificar por el usuario 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;eliminará ese horrible 'error' de resaltado, PERO puede eliminar la capacidad de sus dispositivos de proporcionar un teclado específico. Para nosotros con Android 4.0.3 en una Samsung Tab 2, ya no podíamos obtener el teclado numérico. Incluso usando type = 'number' & / o type = 'tel'. ¡Muy frustrante! Por cierto, configurar el color de resaltado del toque no resolvió este problema para este dispositivo y la configuración del sistema operativo. Estamos ejecutando Safari para Android.

Para asegurarse de que la tap-highlight-coloranulación de propiedad funcione para usted, primero considere estas cosas:

No funciona:
-webkit-user-modified: lectura-escritura-solo texto sin formato;
// A veces hace que aparezca el teclado nativo al hacer clic en el elemento

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

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

Este caso funciona para Android desde 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 en sí.

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 un trabajo para mi. Espero que te funcione.

Esto no funcionó para mí en los enlaces de Image Map Area, la única solución que funcionaba era usar javascript capturando el evento ontouchend y evitando el comportamiento predeterminado del navegador devolviendo false en el controlador.

con jQuery:

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

Solo quería compartir mi experiencia. Realmente no conseguí que esto funcionara, y quería evitar el lento css- *. Mi solución fue descargar Reset CSS v2.0 de Eric Meyer ( http://meyerweb.com/eric/tools/css/reset/ ) y agregar este a mi proyecto phonegap. Luego agregué:

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

En mi experiencia, este es un enfoque más rápido para *, pero también es un enfoque para errores menos extraños. La combinación de toque-resaltado, -webkit-usuario-modificar: lectura-escritura-solo texto sin formato y la desactivación de, por ejemplo, el resaltado de texto nos han proporcionado muchos quebraderos de cabeza. Uno de los peores es que de repente la entrada del teclado deja de funcionar y la visualización del teclado es lenta.

Complete el restablecimiento de CSS con el resaltado naranja 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;
}

Probé este y funcionó 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 solo para toques, sino también para desplazarse:

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

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

 />

Esto funciona para mí en Ionic, solo póngalo en un archivo CSS para sobrescribirlo

:focus {
    outline-width: 0px;
}

Si el diseño no usa contornos, esto debería funcionar:

*, *::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;
}

Intente seguir el código que deshabilita el contorno del borde

esquema: ninguno! importante;