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

Ответ 1

ОБНОВЛЕНИЕ Январь 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, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Ответ 2

В большинстве браузеров это может быть достигнуто с использованием собственных свойств свойства CSS user-select, изначально предложенных, а затем оставленных в CSS3 и теперь предложенный в CSS UI Level 4:

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

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

Для IE < 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.

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

Ответ 3

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

onselectstart="return false;"

Ответ 4

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

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

Нет никакого "стандартного" совместимого быстрого и простого способа сделать это; использование JavaScript - это вариант.

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

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

Ответ 5

Если вы хотите отключить выбор текста для всего, кроме элементов <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;
}

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

Чтобы сделать все элементы внутри <div class="draggable"></div> недоступными, используйте этот CSS:

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-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(). Вместо этого вы можете использовать '*', если вам все равно.

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

Ответ 10

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

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

Ответ 11

Для этого вы можете использовать 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>

Ответ 12

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

Ответ 13

Попробуйте вставить эти строки в 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;
}

Ответ 14

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

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

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* IE 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  */
}

Ответ 15

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

Ответ 16

В

CSS

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

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

Ответ 17

Для тех, у кого есть проблемы с достижением того же в браузере 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;
}

Ответ 18

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

.user-select(none);

Ответ 19

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

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

Ответ 20

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

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

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

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

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

Ответ 21

Предположим, что существует два div, подобных этому

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/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>

Ответ 22

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

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

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

Ответ 23

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

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

Ответ 24

Примечание:

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

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

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

Ответ 25

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

Ответ 26

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

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

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

Ответ 27

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

Ответ 28

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

Обсуждается в Как:: выбор работает на вложенных элементах.

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

Обычный дизайн CSS

p { color: white;  background: black; }

При выборе

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

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

Ответ 29

Я узнал из CSS-Tricks веб-сайта.

user-select: none;

И это также:

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

Ответ 30

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

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

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