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

Question

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

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

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

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

6081

css cross-browser highlight highlighting textselection

Источник

05 май '09 в 20:29

53 ответа

Другие вопросы по тегам css cross-browser highlight highlighting textselection

user370286 10 дек '10 в 09:28 2010-12-10 09:28 · Answer 1 · 2010-12-10 09:28

ОБНОВЛЕНИЕ Январь 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; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

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

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

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

user96100 05 дек '10 в 11:45 2010-12-05 11:45 · Answer 2 · 2010-12-05 11:45

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

user13986 05 май '09 в 20:37 2009-05-05 20:37 · Answer 3 · 2009-05-05 20:37

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

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

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

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

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

user187606 13 ноя '09 в 16:05 2009-11-13 16:05 · Answer 4 · 2009-11-13 16:05

Решение JavaScript для IE

onselectstart="return false;"

209

Источник

user187606 13 ноя '09 в 16:05

user311744 24 май '11 в 21:24 2011-05-24 21:24 · Answer 5 · 2011-05-24 21:24

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

user758061 30 авг '15 в 18:32 2015-08-30 18:32 · Answer 6 · 2015-08-30 18:32

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

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

user101059 05 май '09 в 20:46 2009-05-05 20:46 · Answer 7 · 2009-05-05 20:46

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

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

122

Источник

user101059 05 май '09 в 20:46

user885686 21 сен '11 в 07:09 2011-09-21 07:09 · Answer 8 · 2011-09-21 07:09

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

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

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

91

Источник

user885686 21 сен '11 в 07:09

user467386 11 ноя '11 в 19:53 2011-11-11 19:53 · Answer 9 · 2011-11-11 19:53

Мне нравится гибридное решение 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, поэтому вы можете добавить туда проверку версии.

user5423108 05 июн '17 в 14:03 2017-06-05 14:03 · Answer 10 · 2017-06-05 14:03

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

user1593459 01 май '13 в 11:36 2013-05-01 11:36 · Answer 11 · 2013-05-01 11:36

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

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

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

79

Источник

user1593459 01 май '13 в 11:36

user2413332 23 дек '13 в 14:05 2013-12-23 14:05 · Answer 12 · 2013-12-23 14:05

Кроме того, для Internet Explorer необходимо добавить фокус псевдокласса (.ClassName:focus) и стиль контура: нет.

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

67

Источник

user2413332 23 дек '13 в 14:05

user1012506 28 авг '16 в 07:13 2016-08-28 07:13 · Answer 13 · 2016-08-28 07: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;
}

63

Источник

user1012506 28 авг '16 в 07:13

user9438032 31 мар '18 в 11:32 2018-03-31 11:32 · Answer 14 · 2018-03-31 11:32

Быстрое обновление хака: март 2017 года - от CSS-хитрости

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

.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-Trick, проблема в том,

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

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

user2893733 11 окт '19 в 13:27 2019-10-11 13:27 · Answer 15 · 2019-10-11 13:27

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

Вы можете сделать это с помощью миксина:

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

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

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

user2756352 19 май '14 в 05:30 2014-05-19 05:30 · Answer 16 · 2014-05-19 05:30

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

53

Источник

user2756352 19 май '14 в 05:30

user1453858 26 окт '12 в 05:44 2012-10-26 05:44 · Answer 17 · 2012-10-26 05:44

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

user304894 18 апр '12 в 08:34 2012-04-18 08:34 · Answer 18 · 2012-04-18 08:34

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

.user-select(none);

50

Источник

user304894 18 апр '12 в 08:34

user3011961 27 фев '14 в 09:01 2014-02-27 09:01 · Answer 19 · 2014-02-27 09:01

За работой

CSS:

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

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

49

Источник

user3011961 27 фев '14 в 09:01

user90155 05 май '09 в 20:38 2009-05-05 20:38 · Answer 20 · 2009-05-05 20:38

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

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

user2401804 09 апр '14 в 22:56 2014-04-09 22:56 · Answer 21 · 2014-04-09 22:56

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

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

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

user4119808 28 мар '16 в 09:42 2016-03-28 09:42 · Answer 22 · 2016-03-28 09:42

Предположим, есть два 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>

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

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

user2027885 03 апр '13 в 08:31 2013-04-03 08:31 · Answer 23 · 2013-04-03 08:31

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

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

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

33

Источник

user2027885 03 апр '13 в 08:31

user1716164 30 окт '12 в 06:56 2012-10-30 06:56 · Answer 24 · 2012-10-30 06:56

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

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

32

Источник

user1716164 30 окт '12 в 06:56

user1925574 07 ноя '14 в 13:22 2014-11-07 13:22 · Answer 25 · 2014-11-07 13:22

НОТА:

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

Прежде чем мы выбрали что-нибудь

После того как мы выбрали

Числа были скопированы

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

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

user10087397 08 ноя '18 в 09:17 2018-11-08 09:17 · Answer 26 · 2018-11-08 09:17

Легко делается с:

-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: в этом случае Привет, Мир. Затем вам нужно будет перейти к CSS и сделать это:

#example::before //You can ofc 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.
}

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

user859857 14 май '15 в 00:13 2015-05-14 00:13 · Answer 27 · 2015-05-14 00:13

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

user741850 09 апр '13 в 16:42 2013-04-09 16:42 · Answer 28 · 2013-04-09 16:42

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

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

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

23

Источник

user741850 09 апр '13 в 16:42

user16359609 27 ноя '21 в 11:52 2021-11-27 11:52 · Answer 29 · 2021-11-27 11:52

Это должно помочь:

      .no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}

      <span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

Фрагмент:

21

Источник

user16359609 27 ноя '21 в 11:52

user2731897 21 мар '14 в 13:53 2014-03-21 13:53 · Answer 30 · 2014-03-21 13:53

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

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

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

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

p { color: white;  background: black; }

На выбор

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

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