Как отключить подсветку выделения текста

Для якорей, которые действуют как кнопки (например, « Вопросы» , « Теги» , « Пользователи» и т. Д. В верхней части страницы «Переполнение стека») или вкладок, существует ли стандартный CSS-способ для отключения эффекта выделения, если пользователь случайно выбрал текст?

Я понимаю, что это можно сделать с помощью JavaScript, и небольшое прибегание к поиску принесло только Mozilla -moz-user-select.

Существует ли совместимый со стандартами способ сделать это с помощью CSS, и если нет, то каков подход «наилучшей практики»?

ОБНОВЛЕНИЕ январь 2017 года:

Согласно « Могу ли я использовать» , в user-selectнастоящее время поддерживается во всех браузерах, кроме Internet Explorer 9 и более ранних версий (но, к сожалению, все еще нужен префикс поставщика).

Все правильные варианты CSS:

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

Обратите внимание, что user-selectв процессе стандартизации (в настоящее время в рабочем проекте W3C ). Не гарантируется, что он будет работать везде, и в браузерах могут быть различия в реализации, и в будущем браузеры могут отказаться от его поддержки.

Дополнительную информацию можно найти в документации Mozilla Developer Network .

В большинстве браузеров это может быть достигнуто с помощью запатентованных вариантов user-selectсвойства CSS , первоначально предложенных, а затем заброшенных в CSS 3 и теперь предложенных в CSS UI Level 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;
}

Для Internet Explorer <10 и Opera <15 вам нужно будет использовать unselectableатрибут элемента, который вы не хотите выбирать. Вы можете установить это, используя атрибут в HTML:

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

К сожалению, это свойство не наследуется, то есть вы должны поместить атрибут в начальный тег каждого элемента внутри <div> . Если это проблема, вы можете вместо этого использовать JavaScript, чтобы сделать это рекурсивно для потомков элемента:

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

Обновление 30 апреля 2014 года : этот обход дерева нужно перезапускать всякий раз, когда в дерево добавляется новый элемент, но из комментария @Han видно, что этого можно избежать, добавив mousedownобработчик событий, который устанавливаетunselectable цель событие. Смотрите http://jsbin.com/yagekiji/1 для деталей.

Это все еще не охватывает все возможности. Хотя невозможно инициировать выборки в невыбираемых элементах, в некоторых браузерах (например, Internet Explorer и Firefox) все еще невозможно предотвратить выборки, которые начинаются до и заканчиваются после невыбираемого элемента, не делая весь документ недоступным для выбора.

Решение JavaScript для Internet Explorer:

onselectstart="return false;"

Пока свойство CSS 3 для выбора пользователя не станет доступным, браузеры на основе Gecko будут поддерживать -moz-user-selectсвойство, которое вы уже нашли. Браузеры на базе WebKit и Blink поддерживают-webkit-user-select свойство.

Это, конечно, не поддерживается в браузерах, которые не используют движок рендеринга Gecko.

Не существует простого и простого способа сделать это в соответствии со стандартами; использование JavaScript является опцией.

Реальный вопрос заключается в том, почему вы хотите, чтобы пользователи не могли выделять и, предположительно, копировать и вставлять определенные элементы? Я ни разу не сталкивался с тем, что хотел бы, чтобы пользователи не выделяли определенную часть моего сайта. Несколько моих друзей, потратив много часов на чтение и написание кода, будут использовать функцию выделения, чтобы помнить, где на странице они находились, или предоставлять маркер, чтобы их глаза знали, где искать дальше.

Единственное место, где я мог бы убедиться, что это полезно, - это если у вас есть кнопки для форм, которые не следует копировать и вставлять, если пользователь копирует и вставляет веб-сайт.

Если вы хотите отключить выделение текста во всем, кроме <p>элементов, вы можете сделать это в CSS (обратите внимание на то, -moz-noneчто позволяет переопределять субэлементы, что разрешено в других браузерах с помощью 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;
}

В решениях из предыдущих ответов выбор остановлен, но пользователь все еще думает, что вы можете выбрать текст, потому что курсор все еще меняется. Чтобы он оставался статичным, вам нужно установить курсор 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>

Это сделает ваш текст абсолютно плоским, как в настольном приложении.

Вы можете сделать это в Firefox и Safari (Chrome также?)

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

Обходной путь для WebKit :

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

Я нашел это в примере CardFlip.

Мне нравится гибридное решение CSS + jQuery.

Чтобы сделать все элементы внутри <div class="draggable"></div>невыбираемыми, используйте этот 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;
 }

И затем, если вы используете jQuery, добавьте это внутри $(document).ready()блока:

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

Я полагаю, что вы все еще хотите, чтобы любые входные элементы были интерактивными, отсюда и :not()псевдоселектор. Вы могли бы использовать'*' вместо этого, если вам все равно.

Предостережение: Internet Explorer 9 может не нуждаться в этой дополнительной части jQuery, поэтому вы можете добавить туда проверку версии.

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Это не самый лучший способ.

Вы можете использовать CSS или JavaScript для этого.

JavaScript поддерживается в старых браузерах, например в старых версиях Internet Explorer, но если это не ваш случай, используйте способ CSS:

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>

Кроме того, для Internet Explorer необходимо добавить псевдоклассfocus (.ClassName: focus) и 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  */
}

Попробуйте вставить эти строки в CSS и вызвать «disHighlight» в свойстве класса:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

Быстрое обновление Hack

Если вы используете значение noneдля всех user-selectсвойств CSS (включая его префиксы браузера), это может привести к возникновению проблемы.

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

Как говорит CSS-Tricks , проблема заключается в следующем:

WebKit по- прежнему позволяет копировать текст, если вы выбираете элементы вокруг него.

Вы также можете использовать следующий, чтобы enforceвыбрать весь элемент, что означает, что если вы щелкнете по элементу, будет выделен весь текст, заключенный в этот элемент. Для этого все, что вам нужно сделать, это изменить значение noneна 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  */
}

Для тех, у кого проблемы с достижением того же в браузере Android с помощью сенсорного события, используйте:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

Если вы используете Less и Bootstrap, вы можете написать:

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

За работой

CSS:

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

Это должно работать, но это не будет работать для старых браузеров. Существует проблема совместимости браузера.

С SASS (синтаксис SCSS)

Вы можете сделать это с помощью 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;
}

В теге HTML:

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

Попробуйте это в этом CodePen .

Если вы используете автоматический префикс, вы можете удалить другие префиксы.

Совместимость браузера здесь .

Кроме свойства Mozilla, нет, нет способа отключить выделение текста только стандартным CSS (на данный момент).

Если вы заметили, переполнение стека не отключает выделение текста для их кнопок навигации, и я бы рекомендовал не делать этого в большинстве случаев, так как оно изменяет нормальное поведение выделения и противоречит ожиданиям пользователя.

Это работает в некоторых браузерах:

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

Просто добавьте нужные элементы / идентификаторы перед селекторами, разделенными запятыми без пробелов, например:

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

Другие ответы лучше; это, вероятно, следует рассматривать как последнее средство / ловушку.

Предположим, есть два типа divs:

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

Установите курсор на значение по умолчанию, чтобы он давал пользователю ощущение, которое невозможно выбрать.

Префикс должен использоваться для поддержки его во всех браузерах. Без префикса это может не сработать во всех ответах.

Это будет полезно, если выбор цвета также не нужен:

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

... все другие исправления браузера. Это будет работать в Internet Explorer 9 или более поздней версии.

Добавьте это к первому div, в котором вы хотите отключить выделение для текста:

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

НОТА:

Правильный ответ верен в том смысле, что он не позволяет вам выбрать текст. Однако это не мешает вам копировать текст, как я покажу на следующей паре снимков экрана (по состоянию на 7 ноября 2014 г.).

Как видите, мы не смогли выбрать номера, но мы смогли скопировать их.

Проверено на: Ubuntu , Google Chrome 38.0.2125.111.

Чтобы получить нужный мне результат, я нашел , что я должен был использовать как ::selectionиuser-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;
}

Это легко сделать с помощью:

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

В качестве альтернативы:

Допустим, у вас есть <h1 id="example">Hello, World!</h1>. Вам придется удалить innerHTML этого h1, в данном случае Hello, World . Тогда вам придется перейти на CSS и сделать это:

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

Теперь он просто думает, что это блок-элемент, а не текст.

Это не CSS, но стоит упомянуть:

JQuery UI Отключить выбор :

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

Проверьте мое решение без 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>

Всплывающее меню с применением моей техники: http://jsfiddle.net/y4Lac/2/

Хотя этот псевдоэлемент находился в черновиках CSS-селекторов 3-го уровня, он был удален на этапе рекомендации кандидата, так как оказалось, что его поведение было недостаточно определенным, особенно с вложенными элементами, и совместимость не была достигнута.

Это обсуждается в How :: selection работает с вложенными элементами .

Несмотря на то, что это реализовано в браузерах, вы можете создать иллюзию того, что текст не будет выделен, используя тот же цвет и цвет фона при выделении, что и для дизайна вкладок (в вашем случае).

Нормальный дизайн CSS

p { color: white;  background: black; }

На выбор

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

Запрет пользователям выбирать текст вызовет проблемы с юзабилити.