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

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

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

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

4432
задан anon 05 мая '09 в 23:29
источник поделиться
40 ответов
  • 1
  • 2

ОБНОВЛЕНИЕ Январь 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.

6466
ответ дан Blowsie 10 дек. '10 в 12:28
источник поделиться

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

747
ответ дан Tim Down 05 дек. '10 в 14:45
источник поделиться

JavaScript-решение для IE -

onselectstart="return false;"
166
ответ дан Pekka 웃 13 нояб. '09 в 19:05
источник поделиться

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

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

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

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

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

162
ответ дан X-Istence 05 мая '09 в 23:37
источник поделиться

Если вы хотите отключить выбор текста для всего, кроме элементов <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;
}
122
ответ дан Benjamin Crouzier 25 мая '11 в 0:24
источник поделиться

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

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

110
ответ дан ZECTBynmo 30 авг. '15 в 21:32
источник поделиться

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

::selection { background: transparent; }
::-moz-selection { background: transparent; }
100
ответ дан seanmonstar 05 мая '09 в 23:46
источник поделиться

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

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

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

73
ответ дан Alex 21 сент. '11 в 10:09
источник поделиться

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

65
ответ дан Tom Auger 11 нояб. '11 в 22:53
источник поделиться

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

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

61
ответ дан Ale 01 мая '13 в 14:36
источник поделиться

Кроме того, для 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*/
}
57
ответ дан Elad Shechter 23 дек. '13 в 17:05
источник поделиться

Для этого можно использовать 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>
56
ответ дан Alireza 05 июня '17 в 17:03
источник поделиться

В

CSS

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

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

47
ответ дан suraj rawat 27 февр. '14 в 12:01
источник поделиться

Для тех, у кого есть проблемы с достижением того же в браузере 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;
}
46
ответ дан Beep.exe 19 мая '14 в 8:30
источник поделиться
-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');
45
ответ дан Gaurang 26 окт. '12 в 8:44
источник поделиться

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

.user-select(none);
43
ответ дан Codler 18 апр. '12 в 11:34
источник поделиться

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

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

32
ответ дан hbw 05 мая '09 в 23:38
источник поделиться

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

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

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

32
ответ дан r3wt 10 апр. '14 в 1:56
источник поделиться

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

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

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

31
ответ дан Gaurav Aggarwal 28 марта '16 в 12:42
источник поделиться

Примечание:

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

Before we have selected anything

After we have selected

The numbers have been copied

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

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

28
ответ дан Luke Madhanga 07 нояб. '14 в 16:22
источник поделиться

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

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

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

27
ответ дан karthipan raj 03 апр. '13 в 11:31
источник поделиться

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

onmousedown='return false;' 
onselectstart='return false;'
27
ответ дан Chase1986 30 окт. '12 в 9:56
источник поделиться

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

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

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

$("your.selector").disableSelection();
21
ответ дан Automatico 09 апр. '13 в 19:42
источник поделиться

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

20
ответ дан zgnilec 23 февр. '14 в 1:06
источник поделиться

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

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

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

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

p { color: white;  background: black; }

При выборе

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

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

20
ответ дан Suraj Naik 21 марта '14 в 16:53
источник поделиться

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

user-select: none;

И это также:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
15
ответ дан Mohammed Javed 01 апр. '16 в 14:16
источник поделиться

Быстрое обновление взлома: март 2017 - из CSS-Tricks

Если вы поместите значение "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" на "все", которое будет выглядеть следующим образом:

.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 */   
}
12
ответ дан KAZ 31 марта '18 в 14:32
источник поделиться

Этот эффект выделения вызван действием, называемым hover (onMouseHover). Когда вы наведете курсор на любой вкладке, цвет будет изменен. Просто скажите, например.

<div class="menu">
 <ul class="effect">
   <li>Questions </li>
   <li>JOBS </li>
   <li>Users</li>
 </ul>
</div>

<!-- CSS CODE -->

.effect:hover{
   color: none;
}

Вы можете указать любой цвет, если хотите, чтобы он был выделен, иначе вы не сможете его оставить.

10
ответ дан Pushp Singh 03 июня '16 в 16:12
источник поделиться
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
10
ответ дан Hetal Rupareliya 15 апр. '16 в 12:29
источник поделиться
  • 1
  • 2

Другие вопросы по меткам