Como parar o destaque de um elemento div ao clicar duas vezes

91

Eu tenho este elemento div com uma imagem de plano de fundo e quero parar de realçar no elemento div ao clicar duas vezes nele. Existe uma propriedade CSS para isso?

— Dave
fonte

Em qual navegador você está? Em meus testes, não consegui obter um div inteiro para destacar no Firefox 5, Chrome 12 ou IE9.

— tw16 de

154

O CSS abaixo impede que os usuários selecionem texto. Exemplo ao vivo: http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

Para direcionar o IE9 para baixo e o Opera, o atributo html unselectabledeve ser usado:

<div unselectable="on">Test Text</div>

— tw16
fonte

isso não evitou que todo o div fosse destacado. Percebi que era apenas para texto. Quero evitar que todo o div seja destacado ao clicar duas vezes nele.

— dave de

@dave: Presumi que a única vez que um clique duplo causava destaque era quando havia um texto que você queria dizer. Não há necessidade de downvote.

— tw16 de

1

Não funciona no IE ou Opera. Você precisa do unselectableatributo. Não há -o-user-select, por falar nisso.

— Tim Down

observação para usuários SASS / SCSS: você pode, em @include user-select(none);vez de usar CSS bruto

— hilnius

Estranhamente, isso fez com que os divs se tornassem arrastáveis mesmo quando draggable = false, mas apenas no Firefox.

— rovyko

51

Isso funciona para mim

html
{
  -webkit-tap-highlight-color:transparent;
}

— Hans
fonte

Esta deve ser a melhor resposta.

— JohnA10,

11

Isso só será relevante para navegadores de webkit, como Chrome e Safari, e provavelmente não funcionará em nenhuma versão do IE ou Firefox.

— Simon East

30

Eu estava tentando encontrar uma solução para interromper o destaque de div no Chrome e voltei para este post. Mas, infelizmente, nenhuma das respostas resolveu meu problema.

Depois de muita pesquisa online, descobri que a correção é algo muito simples. Não há necessidade de nenhum CSS complexo. Basta adicionar o seguinte CSS à sua página da web e está tudo pronto. Isso funciona em laptops e também em telas de dispositivos móveis.

div { outline-style:none;}

NOTA : Isso funcionou na versão do Chrome 44.0.2403.155 m. Além disso, é compatível com todos os principais navegadores de hoje, conforme explicado neste url: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

— Sunil
fonte

8

Não sou especialista em CSS, mas acho que você pode usar a resposta de tw16 contanto que expanda o número de elementos afetados. Por exemplo, isso impede o destaque em todos os lugares da minha página sem afetar qualquer outro tipo de interatividade:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

A primeira linha é cortesia de Paul Irish (via http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).

— SterlingVix
fonte

Nunca use este CSS quando tiver um PWA no iOS 13, pois isso bloqueia completamente o teclado.

— Fer

2

Segmente todos os elementos div:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Almeje todos os elementos:

::-moz-selection { background:transparent; }
::selection { background:transparent; }

— jasonleonhard
fonte

1

desativar a seleção do usuário:

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

definir fundo transparente para o elemento selecionado:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

— Jin.
fonte

3

Embora este snippet de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade de sua postagem. Lembre-se de que você está respondendo à pergunta para leitores no futuro e essas pessoas podem não saber os motivos de sua sugestão de código.

— msrd0

0

Se um elemento for clicável, você pode querer torná-lo um elemento de botão.

— Medda86
fonte