Desativar destaque de contorno laranja em foco

Estou codificando um aplicativo usando jQuery, jqTouch e phonegap e encontrei um problema persistente que surge quando um usuário envia um formulário usando o botão Go do teclado virtual.

Embora seja fácil fazer com que o cursor se mova para o elemento de entrada de formulário apropriado usando $('#input_element_id').focus(), o destaque laranja sempre retorna para o último elemento de entrada no formulário. (O destaque não aparece quando o formulário é enviado usando o botão de envio de formulário.)

O que eu preciso é encontrar uma maneira de desativar o realce laranja completamente ou então fazer com que ele se mova para o mesmo elemento de entrada que o cursor.

Até agora, tentei adicionar o seguinte ao meu CSS:

.class_id:focus {
    outline: none;
}

Isso funciona no Chrome, mas não no emulador ou no meu telefone. Também tentei editar o jqTouch theme.csspara ler:

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

Sem efeito. Também tentei cada uma das seguintes adições ao AndroidManifest.xmlarquivo:

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

Nenhum dos quais tem qualquer efeito.

Atualização: Eu fiz mais algumas soluções de problemas com isso e até agora encontrei:

1. A propriedade de contorno funciona apenas no Chrome, não no navegador Android.

2. A -webkit-tap-highlight-colorpropriedade funciona de fato no navegador Android, embora não no Chrome. Ele desativa o destaque no foco, bem como no toque.

3. A -webkit-focus-ring-colorpropriedade parece não funcionar em nenhum dos navegadores.

Experimentar:

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

Trabalhe no Android Default, 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;
} 

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

em seu arquivo css. Funcionou para mim!

Remova a caixa laranja no 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-realce-cor para a maioria das versões

usuário-modificar para 4.0.4

Tente a linha de foco

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

Esteja ciente de que usar este CSS -webkit-user-modify: read-write-plaintext-only;IRÁ remover aquele horrível 'bug' de realce - MAS pode matar a capacidade de seus dispositivos de fornecer um teclado específico. Para nós que rodamos o Android 4.0.3 em um Samsung Tab 2, não podíamos mais obter o teclado numérico. Mesmo usando type = 'number' e / ou type = 'tel'. Muito frustrante! BTW, definir a cor de destaque da torneira não ajudou a resolver esse problema para este dispositivo e configuração do sistema operacional. Estamos executando o Safari para Android.

Para garantir que a tap-highlight-colorsubstituição da propriedade funcione para você, considere o seguinte:

Não funciona:
-webkit-user-modify: read-write-plaintext-only;
// Às vezes, faz com que o teclado nativo seja exibido ao clicar no elemento

.class: ativo, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Não funciona se definido para estados

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

Este caso funciona para Android de v2.3 a v4.x, mesmo em um aplicativo PhongeGap. Eu testei no Galaxy Y com Android 2.3.3, no Nexus 4 com Android 4.2.2 e no Galaxy Note 2 com Android 4.1.2. Portanto , não o defina para estados apenas para o próprio elemento .

Use o código abaixo no arquivo CSS

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

É trabalho para mim. Espero que funcione para você.

Isso não funcionou para mim nos links da Área do Mapa de Imagem, a única solução de trabalho era usar javascript capturando o evento ontouchend e evitando o comportamento padrão do navegador retornando false no manipulador.

com jQuery:

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

Eu só queria compartilhar minha experiência. Eu realmente não fiz isso funcionar e queria evitar o lento css- *. Minha solução foi baixar o bom e velho Eric Meyer Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) e adicionar este ao meu projeto phonegap. Eu então adicionei:

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

Na minha experiência, esta é uma abordagem mais rápida para o *, mas também é uma abordagem para bugs menos estranhos. A combinação de toque-realce, -webkit-user-modify: read-write-plaintext-only e desabilitando, por exemplo, o realce de texto nos forneceu muitos headaces. Um dos piores é que, de repente, a entrada do teclado para de funcionar e torna a visualização do teclado lenta.

Reinicialização de CSS completa com o destaque laranja desativado:

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

Eu tentei este e funcionou bem: -

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

Isso funcionará não apenas para toques, mas também para pairar:

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"                 

 />

Este trabalho para mim no Ionic, basta colocar no arquivo CSS para sobrescrever

:focus {
    outline-width: 0px;
}

Se o design não usa contornos, isso deve fazer o trabalho:

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

Tente seguir o código que desativa o contorno da borda

esboço: nenhum! importante;