Desactivar el resaltado de contorno naranja en el foco


106

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.

Respuestas:


210

Tratar:

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

10
no funciona con Android 4.0.4 - ¿Alguien ha experimentado lo mismo? (funciona en versiones anteriores y 4.1)
最 白 目

6
Android 4.0.4 funciona con: -webkit-user-modified: lectura-escritura-solo texto sin formato;
oori

@oori lo hace, sin embargo, eso "rompe" iOS al hacer que el teclado aparezca.
Máximo

@Max, tu comentario no está claro. en iOS: por supuesto, el teclado aparece una vez que se enfoca en un área de entrada / texto ... explique
oori

4
@oori ¿Está bien? Eso no ayuda con elementos que no son de entrada y que no son de área de texto, que fue el tema de mi comentario.
Max

43

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;
} 

1
esta debería ser la respuesta seleccionada
mlg87

En lugar de usar *, puede usar button, si su problema es con botones, por ejemplo.
Brian Burns

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

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


18

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


He estado buscando una solución [Android 4.1.2] durante unos días. Este es el único que funcionó. ¡Un gran gracias!
cassi.lup

@Ben, la respuesta anterior funciona con seguridad ... haga un plunkr / jsfiddle con su código, para que podamos verlo y ayudarlo.
oori

@Ben user-modified para 4.0.4 no es una buena solución, si la tiene, compártala.
Amit

12

Prueba para Focus Line

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

Única solución de trabajo para dispositivos Android 4.2 y similares.
andreszs

10

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.


cómo estás ejecutando Safari para Android.
Amit

Hola @Amit, ¡ha pasado mucho tiempo desde que respondí esto! Yo diría que estaba saliendo directamente del dispositivo como estándar de fábrica ... Tab2 era bastante nuevo en el mercado en ese momento.
Fivebears

7

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í.


1
Este consejo es lo que hizo que me funcionara con WebView en Android 2.3.
dAngelov

WOOOOW ¡¡Este funcionó !! (Android 4.1.2) ¡Maldita sea! ¡Odio la fragmentación de vistas web!
Someone Somewhere

6

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.


2

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;
});

2

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;
}

1

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);
}

-webkit-tap-highlight-color: transparente; -> genial, resuelto para ie Nexus5 (Chrome) y Kindle Fire HD 7 ''. Todas las demás opciones no ayudaron para estos dispositivos / navegador. Tenga cuidado, Firefox y Opera no necesitaban la línea en Nexus5.
Michael Biermann

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;
}

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

 />

0

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

:focus {
    outline-width: 0px;
}

-1

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;
}

-1

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

esquema: ninguno! importante;

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.