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

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