Qualquer maneira de evitar o destaque em azul dos elementos no Chrome ao clicar rapidamente?

123

Na maioria das vezes não estou preocupado com isso, mas eu tenho um carrossel de imagens e se eu clicar nos divs seguinte e anterior rapidamente, eles serão destacados no Chrome.

Tentei usar o contorno: nenhum, mas nenhum efeito. Existem soluções lá fora?

css google-chrome Smith
fonte
Não vejo este efeito na versão atual do Chrome
Billal Begueradj
Eu sei que seu caso de uso é diferente, mas para qualquer outra pessoa que queira removê-lo de todos os links, eu não recomendo fazer isso. Eu tentei removê-lo em um PWA, mas sem o feedback visual, a percepção do usuário é que o aplicativo está mais lento.
collimarco de

Respostas:

170

Além do link fornecido por Floremin , que limpa a seleção de texto usando JavaScript para "limpar" a seleção, você também pode usar CSS puro para fazer isso. O CSS está aqui ...

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Basta adicionar o class="noSelect"atributo ao elemento ao qual deseja aplicar esta classe. Eu recomendo dar uma chance a esta solução CSS. Não há nada de errado em usar o JavaScript, só acredito que isso poderia ser potencialmente mais fácil e limpar um pouco as coisas em seu código.

Para o Chrome no Android, -webkit-tap-highlight-color: transparent; é uma regra adicional que você pode experimentar para obter suporte no Android.

smts
fonte
1
Apenas para o Chrome, você provavelmente só precisa de user-selecte webkit-user-select.
smts
Esta é a solução que estou buscando, pois estou tendo apenas o problema de realce no Chrome e funciona muito bem. Obrigado a todos que participaram!
Smith
36
Não foi possível fazer funcionar com o Chrome no Android. Tive que usar-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Iwazaru
25
-webkit-tap-highlight-color: transparent; é a parte principal do Chrome
FisNaN
Para cromo em android -webkit-tap-highlight-color: transparent; - Funcionou para mim obrigado!
CK Munn de
213

Para Chrome no Android, você pode usar a propriedade CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color é uma propriedade CSS não padrão que define a cor do destaque que aparece sobre um link enquanto ele está sendo tocado. O destaque indica ao usuário que seu toque está sendo reconhecido com sucesso e indica em qual elemento ele está tocando.

Para remover o realce completamente, você pode definir o valor para transparent:

-webkit-tap-highlight-color: transparent;

Esteja ciente de que isso pode ter consequências sobre a acessibilidade: consulte outlinenone.com

Iwazaru
fonte
4
Descobri que quando você executa em uma tela sensível ao toque, por exemplo, o Chrome se comporta de maneira muito semelhante ao Android. Eu tinha um <div> que piscava em azul sempre que você clicava em algum lugar dentro dele. Só quando usei essa resposta é que parou. Obrigado!
Valorum
2
Nenhum dos outros attys css fará isso. Tão importante, já que o destaque da torneira distorce a aparência de tudo o que é clicado, prejudicando sua linguagem visual.
Dominic Cerisano
23
-webkit-tap-highlight-color: transparent;parece funcionar também.
Bernard
1
Gostei disso, para eventos touch é obrigatória! Esta informação tem uma utilidade "fora do gráfico"!
Berker Yüceer
1
Esta é a solução que funcionou para mim em 2020
Blue Bot
66

Estou executando o Chrome versão 60 e nenhuma das respostas CSS anteriores funcionou.

Descobri que o Chrome estava adicionando o destaque azul por meio do outlineestilo. Adicionar o seguinte CSS corrigiu para mim:

:focus {
    outline: none !important;
}
Jeff L.
fonte
5
você, senhor, é um salva-vidas.
beckah
2
este é o que funciona para o Chrome (versão 61) no Android
Stefan,
Funciona para versões mais recentes do Chrome. Obrigado!
CrazedCoder
Super, queria saber por que meu fiel não user-select:noneestava chegando a lugar nenhum
Sean T
Eu tentei de tudo, mas funcionou como um encanto. Obrigado por salvar meus cabelos!
Avinash Kumar
25

Mas, às vezes, mesmo com user-selecte touch-calloutdesligado, cursor: pointer;pode causar esse efeito, então, é só configurar cursor: default;e vai funcionar.

Gustavo B.
fonte
7
Esta é uma resposta correta, cursor: pointer;está realmente causando destaque. Mas -webkit-tap-highlight-color: transparent;é uma solução mais universal.
yanot 01 de
1
@yanot: leia o aviso sobre -webkit-tap-highlight-colorantes de rotulá-la como uma solução relativamente universal : developer.mozilla.org/en-US/docs/Web/CSS/…
Hassan Baig
@HassanBaig Eu acho que é óbvio que eu não quis dizer cross-browser universal , mas neste contexto, ou seja, em diferentes versões do Chrome
yanot
2
obrigado - nenhuma das outras soluções funcionou para mim. Tive que remover o ponteiro do cursor para fazer o destaque azul ir embora
RVP
3
cursor: defaultfuncionou para mim quando nada mais funcionou.
Telarian
-2

Tente criar um manipulador para o evento select nesses elementos e no manipulador você pode limpar a seleção.

Dê uma olhada neste:

Limpar seleção de texto com JavaScript

É um exemplo de limpeza da seleção. Você só precisa modificá-lo para funcionar apenas no elemento específico de que precisa.

Floremin
fonte
Então não pode ser corrigido por CSS, hein? Posso apenas limpar o texto selecionado dentro do meu manipulador de cliques? EDIT- Obrigado pelo exemplo. Isso é uma merda que tem que ser tratado via javascript. Eu esperava que fosse apenas um problema de CSS.
Smith
Além disso, isso terá algum impacto na acessibilidade?
Smith
Você poderia limpar o texto no manipulador de cliques, mas dê uma olhada na resposta @smts com CSS puro.
Floremin
-8

Isso funciona melhor para mim:

.noSelect:hover {
  background-color: white;
}
nagy.zsolt.hun
fonte
6
Isso é RUIM e uma estrada para o inferno futuro. Sem ofensa.
Mike Barwick
e se o fundo do site não for branco?
rideon88
Isso não é sustentável. Ninguém faça isso, por favor.
Telarian