Desativar destaque de contorno laranja em foco


106

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.

Respostas:


210

Experimentar:

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

10
ele não funciona com o Android 4.0.4 - alguém já experimentou o mesmo? (funciona nas versões anteriores e 4.1)
最 白 目

6
android 4.0.4 funciona com: -webkit-user-modify: read-write-plaintext-only;
oori

@oori faz, no entanto, isso "quebra" o iOS fazendo com que o teclado apareça.
Máx.

@Max, seu comentário não é claro. no iOS - é claro que o teclado aparece quando você foca em uma área de entrada / texto .. explique
oori

4
@oori Ok? Isso não ajuda com elementos sem entrada e não textarea, que foi o assunto do meu comentário.
Máx.

43

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

1
esta deve ser a resposta selecionada
mlg87

Em vez de usar, *você pode apenas usar button, se o seu problema for com botões, por exemplo.
Brian Burns

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

em seu arquivo css. Funcionou para mim!


18

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


Estou procurando por uma correção [Android 4.1.2] há alguns dias. Este é o único que funcionou. Muito obrigado!
cassi.lup

@Ben a resposta acima funciona com certeza ... faça um plunkr / jsfiddle com seu código, para que possamos ver e ajudá-lo.
Oori,

@Ben user-modify para 4.0.4 não é uma boa solução para nenhuma outra solução, se você tiver, por favor, compartilhe-a.
Amit

12

Tente a linha de foco

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

Só funciona solução para dispositivos Android 4.2 e semelhantes.
andreszs

10

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.


como você está executando o Safari para Android.
Amit

Ei @Amit, faz muito tempo que não respondo! ele estava saindo direto do dispositivo como padrão de fábrica, eu diria ... O Tab2 era muito novo no mercado na época.
Fivebears

7

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 .


1
Essa dica é o que fez funcionar para mim com um WebView no Android 2.3.
dAngelov

WOOOOW Este funcionou !! (Android 4.1.2) Caramba! Eu odeio fragmentação de webview !!
Alguém em algum lugar

6

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


2

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

2

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

1

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

-webkit-tap-highlight-color: transparente; -> ótimo, resolvido para o Nexus5 (Chrome) e Kindle Fire HD 7 ''. Todas as outras opções não ajudaram para esses dispositivos / navegador. Cuidado, o Firefox e o Opera não precisam da linha no Nexus5.
Michael Biermann

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

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

 />

0

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

:focus {
    outline-width: 0px;
}

-1

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

-1

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

esboço: nenhum! importante;

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.