it-swarm.com.ru

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

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

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

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

4597
anon

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

6710
Blowsie

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

776
Tim Down

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

onselectstart="return false;"
177
Pekka 웃

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

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

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

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

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

171
X-Istence

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

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

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

114
ZECTBynmo

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

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

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

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

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

75
Alex

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

67
Tom Auger

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

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

65
Ale

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

62
Alireza

Кроме того, для 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;/*IE*/
}
57
Elad Shechter

За работой

CSS:

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

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

46
suraj rawat
-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');
46
Gaurang

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

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

.user-select(none);
45
Codler

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

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

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

33
hbw

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

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

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

32
r3wt

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

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

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

32
Gaurav Aggarwal

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

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

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

29
karthipan raj

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

onmousedown='return false;' 
onselectstart='return false;'
28
Chase1986

НОТА:

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

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

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

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

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

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

21
zgnilec

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

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

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

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

p { color: white;  background: black; }

На выбор

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

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

21
Suraj Naik

Быстрое обновление хака: март 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 */   
}
15
Kaz

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

user-select: none;

И это также:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
15
Mohammed Javed

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

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

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

11
codeWithMe

Попробуйте использовать это:

::selection {
    background: transparent;
}

И если вы хотите указать не выбирать внутри определенного элемента, просто поместите класс элемента или идентификатор перед правилом выбора, например:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}
10
mustafa-elhelbawy

Этот эффект выделения вызван действием 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

Для этого вы можете использовать свойство User-select, как показано ниже.

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

Ссылка для подробного описания

9
Chirag Dave
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
9
Hetal Rupareliya

Если вы хотите отключить выделение и выделение для всей страницы, вы можете легко сделать это с помощью CSS

* {
    -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 */
  }
8
jasonleonhard

С CSS-

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

  "unselectable='on' onselectstart="return false;"
  onmousedown="return false;
}
<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

6
Abrar Jahin

Более того, вы можете отключить выбор текста.

если вам нравится SASS (SCSS), и вы не хотите использовать компас, вы можете сделать это

styles.scss

@mixin user-select($select) {
  -webkit-touch-callout:#{$select};
  @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
  #{$pre + user-select}: #{$select};
  } 
  #{user-select}: #{$select};
}

.no-select {
  @include user-select(none);
}
4
Yevgeniy Afanasyev

Я объединил различные браузерные CSS с невыбираемым тегом, необходимым для IE <9.

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
4
omikes

Может быть, вы можете использовать это решение до:

nav li {
	display: inline-block;
	position: relative;
}

nav li a {
	display: inline-block;
	padding: 10px 20px;
}

nav li a:hover {
	color: red;
}

nav li.disabled:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
<nav>
	<ul>
	<li><a href="#">Link</a></li>
	<li class="disabled"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	</ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

1
grinmax

:: выбор {фон: прозрачный; цвет: прозрачный;}

:: - moz-selection {background: прозрачный; цвет: прозрачный;}

0
Navneet Kumar