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?

css xhtml tags highlighting double-click 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

Respostas:

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