Jak zatrzymać podświetlanie elementu div po dwukrotnym kliknięciu

93

Mam ten element div z obrazem w tle i chcę zatrzymać podświetlanie elementu div po dwukrotnym kliknięciu. Czy istnieje do tego właściwość CSS?

css xhtml tags highlighting double-click dave
źródło
W jakiej przeglądarce jesteś? Podczas moich testów nie udało mi się podświetlić całego elementu div w przeglądarce Firefox 5, Chrome 12 lub IE9.
tw16

Odpowiedzi:

159

Poniższy arkusz CSS uniemożliwia użytkownikom zaznaczanie tekstu. Przykład na żywo: 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;

Aby skierować IE9 w dół i Operę, unselectablenależy zamiast tego użyć atrybutu html :

<div unselectable="on">Test Text</div>
tw16
źródło
nie przeszkodziło to w podświetleniu całego elementu div. Zauważyłem, że dotyczy to tylko tekstu. Chcę zapobiec podświetleniu całego elementu DIV po dwukrotnym kliknięciu.
dave
@dave: Założyłem, że jedyny przypadek, kiedy dwukrotne kliknięcie powoduje podświetlenie, to kiedy był w nim tekst, to właśnie miałeś na myśli. Nie musisz głosować przeciw.
tw16
1
Nie działa w IE ani w Operze. Potrzebujesz unselectableatrybutu. Nawiasem -o-user-selectmówiąc, nie ma .
Tim Down
uwaga dla użytkowników SASS / SCSS: możesz @include user-select(none);zamiast używać surowego CSS
hilnius
O dziwo, spowodowało to, że divy stały się przeciągalne nawet wtedy draggable = false, ale tylko w przeglądarce Firefox.
rovyko
52

To działa dla mnie

html
{
  -webkit-tap-highlight-color:transparent;
}
Hans
źródło
To powinna być najlepsza odpowiedź.
John A10
11
Będzie to dotyczyło tylko przeglądarek webkit, takich jak Chrome i Safari, i prawdopodobnie nie będzie działać w żadnej wersji IE lub Firefox.
Simon East
30

Próbowałem znaleźć rozwiązanie, aby zatrzymać podświetlanie div w Chrome i wróciłem do tego posta. Ale niestety żadna z odpowiedzi nie rozwiązała mojego problemu.

Po wielu poszukiwaniach online stwierdziłem, że poprawka jest bardzo prosta. Nie ma potrzeby stosowania żadnego skomplikowanego CSS. Po prostu dodaj następujący kod CSS do swojej strony internetowej i gotowe. Działa to zarówno na laptopach, jak i na ekranach telefonów komórkowych.

div { outline-style:none;}

UWAGA : zadziałało w wersji Chrome 44.0.2403.155 m. Ponadto jest obsługiwany we wszystkich głównych przeglądarkach współczesnych, jak wyjaśniono pod tym adresem URL: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

Sunil
źródło
8

Nie jestem ekspertem od CSS, ale myślę, że możesz użyć odpowiedzi tw16, o ile zwiększysz liczbę elementów, których to dotyczy. Na przykład zapobiega to podświetlaniu wszystkich elementów mojej strony bez wpływu na inne rodzaje interaktywności:

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

Ta pierwsza linijka jest dzięki uprzejmości Paula Irisha (przez http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).

SterlingVix
źródło
Nigdy nie używaj tego CSS, gdy masz PWA na iOS 13, to całkowicie blokuje klawiaturę.
Fer
2

Kieruj reklamy na wszystkie elementy div:

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

Skieruj na wszystkie elementy:

::-moz-selection { background:transparent; }
::selection { background:transparent; }
jasonleonhard
źródło
1

wyłącz wybór użytkownika:

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

ustaw przezroczyste tło dla wybranego elementu:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
Jin.
źródło
3
Chociaż ten fragment kodu może rozwiązać problem, dołączenie wyjaśnienia naprawdę pomaga poprawić jakość Twojego posta. Pamiętaj, że odpowiadasz na pytanie do czytelników w przyszłości, a osoby te mogą nie znać powodów, dla których zaproponowałeś kod.
msrd0
0

Jeśli element jest klikalny, możesz chcieć uczynić go elementem przycisku.

Medda86
źródło