Jak wyłączyć podświetlanie zaznaczenia tekstu

5200

Czy dla kotwic, które działają jak przyciski (na przykład Pytania , Tagi , Użytkownicy itp. U góry strony Przepełnienie stosu) lub karty, istnieje standardowy sposób CSS, aby wyłączyć efekt podświetlenia, jeśli użytkownik przypadkowo wybierze tekst?

Zdaję sobie sprawę, że można to zrobić za pomocą JavaScript, a trochę googlingu dało -moz-user-selectopcję tylko dla Mozilli .

Czy istnieje zgodny ze standardami sposób osiągnięcia tego za pomocą CSS, a jeśli nie, jakie jest podejście „najlepszych praktyk”?

Peter Mortensen
źródło
7
czy elementy w elemencie, które ma podświetlanie wyłączone, mają włączone podświetlanie za pomocą w css w atrybucie stylu lub klasy? lub innymi słowy, czy istnieją inne wartości -webkit-user-select ect. inne niż tylko żadne?
7
Powiązane: stackoverflow.com/questions/16600479/… = jak zezwolić na wybranie tylko niektórych elementów potomnych
JK.
9
W niektórych przeglądarkach występuje błąd polegający na tym, że wybranie opcji „Zaznacz wszystko” (CTRL + A i CMD + A) wciąż powoduje zaznaczenie. Można o to walczyć z przezroczystym kolorem wyboru: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
DaAwesomeP
12
Mogę tylko powiedzieć: proszę nie rób tego. Z mojego doświadczenia wynika , że najczęściej chcę zaznaczyć tekst, który służy również jako przycisk, aby skopiować go i wkleić w innym miejscu. Byłoby to niewyobrażalnie irytujące, gdybyśmy nie byli w stanie tego zrobić, ponieważ niektórzy twórcy stron internetowych zrobili wszystko, aby celowo wyłączyć tę funkcję. Więc proszę nie rób tego, chyba że masz bardzo, bardzo dobry powód.
kajacx
3
W roku 2017, to jest lepszy sposób wykorzystać postcssi autoprefixeroraz zestaw wersję przeglądarki, a następnie postcsszrobić wszystko cool.
AmerllicA

Odpowiedzi:

7320

AKTUALIZACJA Styczeń 2017:

Według Czy mogę używać , user-selectjest obecnie obsługiwany we wszystkich przeglądarkach z wyjątkiem Internet Explorera 9 i wcześniejszych wersji (ale niestety nadal wymaga prefiksu dostawcy).


Wszystkie prawidłowe odmiany CSS to:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Zauważ, że user-selectjest w trakcie procesu standaryzacji (obecnie w wersji roboczej W3C ). Nie gwarantuje się, że będzie działać wszędzie i mogą istnieć różnice w implementacji między przeglądarkami, aw przyszłości przeglądarki mogą zrezygnować z obsługi.


Więcej informacji można znaleźć w dokumentacji Mozilla Developer Network .

Blowsie
źródło
38
ładny kod molokoloco: D, chociaż osobiście trzymałbym się z daleka od korzystania z niego, ponieważ czasami możesz potrzebować różnych wartości dla różnych przeglądarek i opiera się on na JavaScript. Utworzenie klasy i dodanie jej do elementu lub zastosowanie css do typu elementu w arkuszu stylów jest dość kuloodporne.
Blowsie
58
„user-select” - Wartości: brak | tekst | przełącz | element | elementy | wszystkie | inherit - w3.org/TR/2000/WD-css3-userint-20000216
Blowsie
34
Właściwie -o-user-select nie jest zaimplementowany w Operze. Zamiast tego implementuje niewykrywalny atrybut IE.
Tim Down
30
Z jakiegoś powodu to samo nie działało w IE8, a następnie dodałem <div onselectstart="return false;">do mojego głównego div.
robasta
306
to jest niedorzeczne! tak wiele różnych sposobów na zrobienie tego samego. stwórzmy nowy standard dla wyborów użytkowników. nazwiemy to standard-user-select. wtedy nie będziemy mieć tych problemów. chociaż dla kompatybilności wstecznej powinniśmy również uwzględnić inne. więc teraz kod się zmienia -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ach, o wiele lepiej.
Claudiu
854

W większości przeglądarek można to osiągnąć za pomocą zastrzeżonych odmian user-selectwłaściwości CSS , pierwotnie zaproponowanych, a następnie porzuconych w CSS 3, a teraz zaproponowanych w CSS UI poziom 4 :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

W przypadku przeglądarki Internet Explorer <10 i Opera <15 musisz użyć unselectableatrybutu elementu, którego nie można wybrać. Możesz ustawić to za pomocą atrybutu w HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Niestety ta właściwość nie jest dziedziczona, co oznacza, że ​​musisz umieścić atrybut w tagu początkowym każdego elementu wewnątrz <div>. Jeśli jest to problem, możesz zamiast tego użyć JavaScript, aby zrobić to rekurencyjnie dla potomków elementu:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Aktualizacja 30 kwietnia 2014 r . : Trawersję drzewa należy ponownie uruchomić za każdym razem, gdy do drzewa dodawany jest nowy element, ale z komentarza @Han wydaje się, że można tego uniknąć, dodając moduł mousedownobsługi zdarzeń, który ustawia obiekt unselectabledocelowy zdarzenie. Szczegółowe informacje można znaleźć na stronie http://jsbin.com/yagekiji/1 .


To wciąż nie obejmuje wszystkich możliwości. Chociaż nie można inicjować selekcji w elementach, których nie można wybrać, w niektórych przeglądarkach (na przykład Internet Explorer i Firefox) nadal nie można zapobiec selekcjom, które rozpoczynają się przed i kończą po elemencie, którego nie można wybrać, bez uniemożliwienia wyboru całego dokumentu.

Tim Down
źródło
30
powinieneś usunąć selektor * ze swojego przykładu, jest on naprawdę nieefektywny i naprawdę nie ma potrzeby używania go w twoim przykładzie, prawda?
Blowsie
66
@Blowsie: Nie sądzę: specyfikacja CSS 2 stwierdza, że *.fooi .foosą one dokładnie równoważne (w drugim przypadku *sugerowany jest selektor uniwersalny ( )), więc poza dziwactwami przeglądarki, nie widzę, aby *to zaszkodziło wydajność. *Moim od dawna nawykiem jest włączanie tego , co początkowo zacząłem robić dla czytelności: wyraźnie stwierdza na pierwszy rzut oka, że ​​autor zamierza dopasować wszystkie elementy.
Tim Down
38
oooh po kilku dalszych lekturach wydaje się, że * jest nieskuteczny tylko wtedy, gdy używa się go jako klucza (najwyższego selektora), tzn. nie można go wybrać *. Więcej informacji tutaj code.google.com/speed/page-speed/docs/…
Blowsie
20
Zamiast używać class = "unselectable", po prostu użyj selektora atrybutów [unselectable = "on"] {…}
Chris Calo
13
@Francisc: Nie. Jak powiedziałem wcześniej Blowsie w komentarzach, nie ma to żadnej różnicy.
Tim Down
196

Rozwiązaniem JavaScript dla Internet Explorera jest:

onselectstart="return false;"
Pekka
źródło
55
Nie zapomnij o ondragstart!
Mathias Bynens
9
jeszcze jedno. Jeśli dodasz to do treści, nie będziesz mógł zaznaczać tekstu w obszarach tekstowych ani w polach wprowadzania w IE. Sposób, w jaki to naprawiłem dla IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
TheBrain
2
Można to dodać jako atrybut za pomocą jQuery - $ („p”). Attr („onselectstart”, „return false”) To była jedyna niezawodna metoda dla mnie w IE8
Matt
13
@Abudayah, ponieważ nie działają one w starszych wersjach programu Internet Explorer? Taki jest sens całej odpowiedzi.
Pekka
?? nadal mogę zawsze zaznaczać tekst w inputelementach, nawet jeśli używam user-select: none. Muszę wiedzieć, jak temu zapobiec
Oldboy
191

Dopóki właściwość wyboru użytkownika CSS 3 nie będzie dostępna, przeglądarki oparte na Gecko obsługują -moz-user-selectwłaściwość, którą już znalazłeś. Przeglądarki WebKit i Blink obsługują tę -webkit-user-selectwłaściwość.

To oczywiście nie jest obsługiwane w przeglądarkach, które nie używają silnika renderującego Gecko.

Nie ma szybkiego i łatwego sposobu na spełnienie „standardów”; używanie JavaScript jest opcją.

Prawdziwe pytanie brzmi: dlaczego chcesz, aby użytkownicy nie mogli wyróżniać i przypuszczalnie kopiować i wklejać niektóre elementy? Nigdy nie spotkałem się z tym, że nie chcę, aby użytkownicy wyróżnili pewną część mojej witryny. Kilku moich przyjaciół, po spędzeniu wielu godzin na czytaniu i pisaniu kodu, użyje funkcji wyróżnienia jako sposobu na zapamiętanie, gdzie byli na stronie, lub dostarczenia znacznika, aby ich oczy wiedziały, gdzie szukać dalej.

Jedyne miejsce, w którym mogę to zobaczyć, jest przydatne, jeśli masz przyciski formularzy, których nie należy kopiować i wklejać, jeśli użytkownik kopiuje i wkleja witrynę.

X-Istence
źródło
20
Sprawa guzików byłaby dokładnie moją motywacją.
Kriem
27
Innym powodem, dla którego jest to potrzebne, jest kliknięcie z wciśniętym klawiszem Shift, aby zaznaczyć wiele wierszy w siatce lub tabeli. Nie chcesz wyróżniać tekstu, chcesz, aby zaznaczał wiersze.
Gordon Tucker
7
Istnieją również kwestie prawne, w których treść innej osoby jest legalnie publikowana, ale klauzula w licencji wymaga od wydawców internetowych, aby uniemożliwić łatwe kopiowanie i wklejanie tekstu. To doprowadziło mnie do znalezienia tego pytania. Nie zgadzam się z tym wymogiem, ale firma, dla której podpisuję umowę, jest prawnie zobowiązana do wdrożenia go w ten sposób.
Craig M
5
@CraigM Styl css nie powstrzymuje osoby przed pobraniem źródła HTML i skopiowaniem go. Jeśli chcesz chronić swoje treści, musisz znaleźć lepsze sposoby.
Agile Jedi,
27
Wysoce interaktywna aplikacja internetowa z dużą ilością funkcji przeciągnij i upuść ... przypadkowe wyróżnienie jest dużym problemem związanym z użytecznością.
Marc Hughes,
138

Jeśli chcesz wyłączyć <p>zaznaczanie tekstu we wszystkim oprócz elementów, możesz to zrobić w CSS (uważaj na to, -moz-nonektóre pozwala na przesłonięcie podelementów, co jest dozwolone w innych przeglądarkach z none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
Benjamin Crouzier
źródło
12
Upewnij się, że masz również możliwość wyboru pól wejściowych: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
joshuadelange
11
Zachowaj ostrożność przy wyłączaniu oczekiwań interfejsu użytkownika przeglądarki na WSZYSTKIM kodzie, z wyjątkiem jednego elementu. Co na przykład z tekstem elementów listy <li />?
Jason T Featheringham
Tylko aktualizacja ... według MDN od Firefox 21 -moz-nonei nonesą takie same.
Kevin Fegan,
2
W tym celu możesz dodać kursor: domyślnie i kursor: tekst odpowiednio
:)
Bomba. To jest do powiedzenia. KONIEC. ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[zaznacza wszystko na liście nieuporządkowanej i sprawia, że ​​nie można jej wybrać, zamiast niszczyć całe drzewo widoku.] Dzięki za lekcję. Moja lista przycisków wygląda świetnie i poprawnie reaguje na dotykanie i naciskanie ekranu zamiast uruchamiania IME (widżety schowka na Androida).
Hypersoft Systems,
125

W rozwiązaniach z poprzednich odpowiedzi zaznaczanie jest zatrzymane, ale użytkownik nadal uważa, że ​​można zaznaczyć tekst, ponieważ kursor nadal się zmienia. Aby zachować statyczność, musisz ustawić kursor CSS:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Spowoduje to, że tekst będzie całkowicie płaski, tak jak w aplikacji komputerowej.

ZECTBynmo
źródło
„Płaski” w przeciwieństwie do czego?
kojow7
@ kojow7 W przeciwieństwie do „warstwowego”. Zamiast tekstu unoszącego się nad innymi elementami. Jest podobny do różnicy między obrazami SVG i PNG.
Yeti
4
Byłem zaskoczony, gdy odkryłem, że Firefox nadal wymaga prefiksu dostawcy w 2019 r. Zlekceważyłem tylko user-select: none;, myśląc, że standard zostanie już przyjęty, ale niestety nie. Sprawia, że ​​zastanawiasz się, co ludzie w komitecie normalizacyjnym mogą nadal debatować. „Nie, wy… Naprawdę myślę, że tak powinno być, user-select: cant;ponieważ jest bardziej opisowe, wiesz?” „Już nad tym skończyliśmy, Mike. Musielibyśmy pominąć apostrof, a to zła forma!” „Dosyć, wszyscy! Ponownie będziemy rozmawiać na ten temat w przyszłym miesiącu. Posiedzenie Komitetu Normalizacyjnego zostało odroczone!”
Mentalista
109

Możesz to zrobić w przeglądarce Firefox i Safari (także w Chrome?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }
seanmonstar
źródło
121
Nie poleciłbym tego robić, ponieważ tak naprawdę to nie rozwiązuje problemu; wyłączając zaznaczanie tekstu - po prostu go ukrywa. Może to prowadzić do złej użyteczności, ponieważ jeśli przeciągnę kursor po stronie, mógłbym wybrać dowolny dowolny tekst, nie znając go. Może to powodować różnego rodzaju dziwne „błędy” użyteczności.
Keithamus
1
Nie działa na obrazach PNG z przezroczystymi obszarami: zawsze wybierze jasnoniebieski… Jakieś obejście?
AvL
80

Obejście dla WebKit :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Znalazłem to w przykładzie CardFlip.

Alex
źródło
1
Korzystanie transparentzamiast rgba działa również w Chrome 42 na Androida.
Clint Pachl
77

Lubię hybrydowe rozwiązanie CSS + jQuery.

Aby wszystkie elementy wewnątrz nie były <div class="draggable"></div>zaznaczone, użyj tego CSS:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

A następnie, jeśli używasz jQuery, dodaj to w $(document).ready()bloku:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Myślę, że nadal chcesz, aby wszystkie elementy wejściowe były interaktywne, stąd :not()pseudo-selektor. Możesz użyć '*'zamiast tego, jeśli cię to nie obchodzi.

Uwaga: Internet Explorer 9 może nie potrzebować tego dodatkowego elementu jQuery, więc możesz dodać tam kontrolę wersji.

Tom Auger
źródło
5
Użyj -ms-user-select: none; (dla IE10), a twoim jQuery „if” powinno być to: if (($ .browser.msie && $ .browser.version <10) || $
.browser.opera
Bądź ostrożny człowieku !!! Aby można go było wybrać w Firefoksie, musisz użyć-moz-user-select: Normal;
Nicolas Thery
7
@ mhenry1384 jQuery.browserjest przestarzały od wersji 1.3 i został usunięty w wersji 1.9 - api.jquery.com/jQuery.browser
WynandB
@Wynand Dobry punkt. Ale jaki rodzaj „wykrywania funkcji” istnieje, aby określić, której właściwości CSS użyć?
Tom Auger,
@TomAuger Możesz użyć jQuery.support, pozwala sprawdzić pojedyncze funkcje: Link
Aequanox
69

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Jednak nie jest to najlepszy sposób.

Ale
źródło
3
Możesz także użyć titlejako atrybutu.
Szczoteczka do zębów
6
To bardzo kreatywne rozwiązanie. Zwłaszcza jeśli użyje atrybutu title, ponieważ prawdopodobnie byłoby to lepsze dla czytników ekranu.
pseudosavant
4
Próbowałem ( JSBin ) i nie działa w IE. Niestety starsze IE są jedynymi, dla których user-selectnie działa.
pseudosavant
1
To świetna alternatywa dla JS, która działa w Chrome! Niesamowite!
saricden,
Wspaniale! ......
Lonely
69

Możesz do tego użyć CSS lub JavaScript .

Sposób JavaScript jest obsługiwany w starszych przeglądarkach, takich jak również stare wersje Internet Explorera, ale jeśli to nie jest twoja sprawa, użyj CSS, a następnie:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

Alireza
źródło
59

W przypadku przeglądarki Internet Explorer musisz także dodać pseudoklasęfocus (.ClassName: focus) i outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}
Elad Shechter
źródło
3
Działa to w IE, dopóki selekcja rozpoczyna się od elementu z classNameklasą. Zobacz ten JSBin .
pseudosavant
57

Spróbuj wstawić te wiersze do CSS i wywołaj właściwość „disHighlight” w klasie:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}
użytkownik1012506
źródło
51

Szybka aktualizacja hacka

Jeśli użyjesz tej wartości nonedla wszystkich user-selectwłaściwości CSS (w tym jej prefiksów w przeglądarce), może wystąpić problem.

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

Jak mówi CSS-Tricks , problemem jest:

WebKit nadal pozwala na kopiowanie tekstu, jeśli wybierzesz elementy wokół niego.

Możesz również użyć poniższego, aby enforcecały element został wybrany, co oznacza, że ​​jeśli klikniesz element, cały tekst zawinięty w ten element zostanie zaznaczony. W tym celu wystarczy zmienić wartość nonena all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}
Kaz
źródło
48

W przypadku problemów z osiągnięciem tego samego w przeglądarce Androida za pomocą zdarzenia dotykowego użyj:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
Beep.exe
źródło
46

Jeśli używasz Less i Bootstrap, możesz napisać:

.user-select(none);
Codler
źródło
46
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
-webkit-user-select: none;
-moz-user-select: none;
onselectstart="return false;"
::selection { 
    background: transparent; 
}

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

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
<div class="draggable"></div>
.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }
if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');
Gaurang
źródło
46

Pracujący

CSS:

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

To powinno działać, ale nie będzie działać w starych przeglądarkach. Wystąpił problem ze zgodnością przeglądarki.

suraj rawat
źródło
Nieprefiksowana właściwość CSS musi znajdować się dokładnie na końcu listy prefiksowanych wersji tej właściwości. Jest to dobra dobra praktyka, inna to zła praktyka tworzenia „nowego IE” z Chrome / Webkit i prowadząca do tylu Brzydkich RZECZY, jak wprowadzenie obsługi prefiksów -webkit w przeglądarkach innych niż Webkit. Posłuchaj, to było już w 2012 roku: dev.opera.com/articles/…
FlameStorm
I cytuję:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.
FlameStorm
42

Z SASS (składnia SCSS)

Możesz to zrobić za pomocą mixin :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

W tagu HTML:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Wypróbuj w tym CodePen .

Jeśli używasz autoprefixera , możesz usunąć inne prefiksy.

Zgodność przeglądarki tutaj .

Ale_info
źródło
36

Oprócz właściwości tylko dla Mozilli, nie, nie ma sposobu, aby wyłączyć zaznaczanie tekstu za pomocą standardowego CSS (jak na razie).

Jeśli zauważysz, Przepełnienie stosu nie wyłącza zaznaczania tekstu dla ich przycisków nawigacyjnych i odradzam to w większości przypadków, ponieważ modyfikuje normalne zachowanie zaznaczenia i powoduje konflikt z oczekiwaniami użytkownika.

Grubaski
źródło
Chociaż zgadzam się, że zmienia zachowanie, którego oczekuje użytkownik, ma sens takie rzeczy, jak przycisk „Dodaj komentarz”, który znajduje się obok tego pola formularza ...
X-Istence
Ale czy nie ujawnia to niepotrzebnych szczegółów implementacyjnych? Nie można wybrać tekstu wejściowego ani przycisku.
@anon: Większość użytkowników prawdopodobnie nie będzie próbować zaznaczyć tekstu przycisku, więc w praktyce nie powinno to mieć większego znaczenia. Poza tym, aby to zrobić, będą musieli zacząć wybierać poza przyciskiem - jeśli klikną wewnątrz samego przycisku, zamiast tego aktywuje się moduł obsługi onclick. Ponadto niektóre przeglądarki (np. Safari) umożliwiają wybranie tekstu normalnych przycisków…
Hbw
6
Jeśli wybierasz zestaw komentarzy z wątku czatu, a każdy komentarz ma obok niego przycisk upvote / downvote, dobrze byłoby wybrać tekst bez innych elementów. Tego właśnie oczekuje lub chce użytkownik. Nie chce kopiować / wklejać etykiet przycisków z każdym komentarzem.
Mnebuerquo
2
A jeśli na przykład dwukrotnie klikniesz przycisk, który zamiast przekierowywać Cię na inną stronę, otworzy div? następnie tekst przycisku zostanie wybrany ze względu na podwójne kliknięcie!
Gigala,
34

Działa to w niektórych przeglądarkach:

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

Po prostu dodaj wybrane elementy / identyfikatory przed selektorami oddzielone przecinkami bez spacji, tak jak:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

Inne odpowiedzi są lepsze; prawdopodobnie powinno to być postrzegane jako ostateczność.

r3wt
źródło
3
Jest kilka rzeczy, które można poznać na pewno, ale to rozwiązanie zdecydowanie nie działa we wszystkich przeglądarkach.
Volker E.
33

Załóżmy, że istnieją dwa divtakie:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

Ustaw kursor na wartość domyślną, aby dać użytkownikowi nie wybieralne odczucie.

Aby móc go obsługiwać we wszystkich przeglądarkach, należy użyć prefiksu. Bez prefiksu może to nie działać we wszystkich odpowiedziach.

Gaurav Aggarwal
źródło
30

Będzie to przydatne, jeśli wybór koloru również nie jest potrzebny:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... wszystkie inne poprawki przeglądarki. Będzie działać w przeglądarce Internet Explorer 9 lub nowszej.

karthipan raj
źródło
1
Zrób to color: inherit;może.
Yaakov Ainspan
Tak, kocham to. Jest to selektor css na poziomie 3 według dokumentacji Mozilli
Bariq Dharmawan
29

Dodaj to do pierwszego diva, w którym chcesz wyłączyć zaznaczenie tekstu:

onmousedown='return false;' 
onselectstart='return false;'
JIT1986
źródło
28

UWAGA:

Prawidłowa odpowiedź jest poprawna, ponieważ uniemożliwia wybranie tekstu. Nie uniemożliwia to jednak skopiowania tekstu, co pokażę z następnymi kilkoma zrzutami ekranu (z 7 listopada 2014 r.).

Zanim cokolwiek wybraliśmy

Po tym, jak wybraliśmy

Numery zostały skopiowane

Jak widać, nie byliśmy w stanie wybrać liczb, ale udało nam się je skopiować.

Testowane na: Ubuntu , Google Chrome 38.0.2125.111.

Luke Madhanga
źródło
1
Miałem ten sam problem. W Mac Chrome 48.0.2564.116 i Mac Safari 9.0.3. W szczególności Mac Firefox 43.0 nie kopiuje postaci, ale umieszcza między nimi dodatkowe linie końcowe. Co należy z tym zrobić?
NHDaly
26

Aby uzyskać wynik, którego potrzebowałem, stwierdziłem, że muszę użyć obu ::selectioniuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}
SemanticZen
źródło
na koniec odpowiedź, która działa
oldboy
23

Można to łatwo zrobić za pomocą:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Alternatywnie:

Powiedzmy, że masz <h1 id="example">Hello, World!</h1>. Będziesz musiał usunąć innerHTML h1, w tym przypadku Hello, World . Następnie musisz przejść do CSS i zrobić to:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

Teraz myśli po prostu, że jest to element blokowy, a nie tekst.

codeWithMe
źródło
21

Sprawdź moje rozwiązanie bez JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Wyskakujące menu z zastosowaną moją techniką: http://jsfiddle.net/y4Lac/2/

apokalipsa
źródło
21

Chociaż ten pseudoelement znajdował się w szkicach Selektorów CSS Poziom 3, został usunięty podczas fazy Rekomendacji Kandydata, ponieważ wydawało się, że jego zachowanie było niedokładnie określone, szczególnie w przypadku elementów zagnieżdżonych, i interoperacyjność nie została osiągnięta.

Jest to omówione w How :: selection działa na elementach zagnieżdżonych .

Pomimo tego, że jest zaimplementowany w przeglądarkach, możesz złudzić, że tekst nie jest zaznaczany, używając tego samego koloru i koloru tła podczas zaznaczania, co w projekcie zakładki (w twoim przypadku).

Normalny projekt CSS

p { color: white;  background: black; }

Przy wyborze

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Niedozwolenie użytkownikom na wybór tekstu spowoduje problemy z użytecznością.

Suraj Naik
źródło
Właśnie dlatego automatyczne uzupełnianie Netbeans nie ma pojęcia, o czym mówię!
halfer