Jak wyłączyć podświetlanie zaznaczenia tekstu

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”?

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 .

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.

Rozwiązaniem JavaScript dla Internet Explorera jest:

onselectstart="return false;"

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ę.

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;
}

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.

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

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

Obejście dla WebKit :

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

Znalazłem to w przykładzie CardFlip.

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.

.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.

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>

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  */
}

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;
}

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  */
}

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;
}

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

.user-select(none);

-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');

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.

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 .

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.

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ść.

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.

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.

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

onmousedown='return false;' 
onselectstart='return false;'

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.).

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.

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;
}

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.

To nie jest CSS, ale warto wspomnieć:

jQuery UI Disable Selection :

$("your.selector").disableSelection();

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/

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ą.