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


5204

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

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

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


7
Могут ли элементы в элементе ведьма отключить подсветку, включить подсветку в css в атрибуте style или class? или другими словами, есть ли другие значения для -webkit-user-select ect. кроме просто нет?

7
Связано: stackoverflow.com/questions/16600479/… = как разрешить выбор только некоторых дочерних элементов
JK.

9
В некоторых браузерах есть ошибка, из-за которой «Выбрать все» (CTRL + A и CMD + A) по-прежнему выделяет вещи. С этим можно бороться с прозрачным выделением цвета: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
DaAwesomeP

12
Могу я просто сказать: пожалуйста, не делай этого. Исходя из моего опыта, я чаще всего хочу выбрать какой-то текст, который также служит кнопкой, чтобы скопировать его в другое место. Было бы невообразимо бешено не иметь возможности сделать это, потому что какой-то веб-разработчик старался отключить эту функцию для меня. Поэтому, пожалуйста, не делайте этого, если у вас нет очень, очень веских причин.
kajacx

3
В 2017 году, это лучший способ использовать postcssи autoprefixerи набор версии браузера, затем postcssсделать все круто.
AmerllicA

Ответы:


7324

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


38
хороший код molokoloco: D, хотя лично я бы держался подальше от его использования, так как иногда вам могут понадобиться разные значения для разных браузеров, и это зависит от JavaScript. Создание класса и добавление его к вашему элементу или применение css к вашему типу элемента в вашей таблице стилей - довольно пуленепробиваемое доказательство.
Blowie

58
'user-select' - Значения: нет | текст | переключить | элемент | элементы | все | наследовать - w3.org/TR/2000/WD-css3-userint-20000216
Blowsie

34
На самом деле -o-user-select не реализован в Opera. Вместо этого он реализует невыбираемый атрибут IE.
Тим Даун

30
По какой-то причине, это само по себе не работало в IE8, потом я добавил <div onselectstart="return false;">свой основной div.
Робаста

308
это смешно! так много разных способов сделать одно и то же. давайте сделаем новый стандарт для пользовательских выборов. мы назовем это standard-user-select. тогда у нас не будет этих проблем. хотя для обратной совместимости мы должны включить и другие. так что теперь код становится -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ах, намного лучше
Клавдиу

854

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


30
Вы должны удалить селектор * из вашего примера, он действительно неэффективен, и в действительности нет необходимости использовать его в вашем примере?
Blowie

66
@Blowie: Я так не думаю: спецификация CSS 2 утверждает, что *.fooи она .fooточно эквивалентна (во втором случае *подразумевается универсальный селектор ( )), поэтому, за исключением странностей браузера, я не вижу, что в том числе *будет вред представление. Моя давняя привычка включать в нее то *, что я изначально начал делать для удобства чтения: в нем прямо говорится, что автор намеревается сопоставить все элементы.
Тим Даун

38
оооо после некоторого дальнейшего чтения кажется * неэффективным только при использовании его в качестве ключа (самый правый селектор), т.е. .unselectable *. Дополнительная информация здесь code.google.com/speed/page-speed/docs/…
Blowsie

20
Вместо использования class = "unselectable", просто используйте селектор атрибута [unselectable = "on"] {…}
Крис Кало,

13
@Francisc: Нет. Как я сказал Blowie ранее в комментариях, это точно не имеет значения.
Тим Даун

196

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

onselectstart="return false;"

55
Не забывай о ondragstart!
Матиас Биненс

9
еще одна вещь здесь. Если вы добавите это в тело, вы не сможете выделять текст внутри текстовых полей или полей ввода в IE. То, как я исправил это для IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
TheBrain

2
Это можно добавить в качестве атрибута, используя jQuery - $ ("p"). Attr ("onselectstart", "return false"). Это был единственный надежный метод для меня в IE8
Мэтт,

13
@ Abudayah, потому что они не работают в старых версиях Internet Explorer? Вот и весь смысл этого ответа.
Пекка

?? я все еще могу всегда выделять текст в inputэлементах, даже если я использую user-select: none. мне нужно знать, как это предотвратить
старик

191

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

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

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

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

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


20
Пуговица была бы именно моей мотивацией.
Крим

27
Другая причина, по которой это необходимо, - нажатие Shift для выбора нескольких строк в сетке или таблице. Вы не хотите выделять текст, вы хотите, чтобы он выделил строки.
Гордон Такер

7
Существуют также юридические проблемы, когда чей-то контент юридически переиздается, но пункт лицензии требует, чтобы веб-издатели препятствовали легкому копированию и вставке текста. Вот что привело меня к поиску этого вопроса. Я не согласен с требованием, но компания, для которой я заключаю контракт, юридически обязана выполнять его таким образом.
Крейг М

5
@CraigM Стиль CSS не мешает человеку захватить источник HTML и скопировать его. Если вы хотите защитить свой контент, вам придется искать лучшие способы.
Проворный джедай

27
Интерактивное веб-приложение с большим количеством перетаскиваний ... случайное выделение - большая проблема с удобством использования.
Марк Хьюз

138

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

12
Убедитесь, что вы также выбираете поля ввода: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
joshuadelange

11
Будьте очень осторожны с отключением ожиданий пользовательского интерфейса браузера для ВСЕГО кода, кроме одного. Как насчет элементов списка <li /> текста, например?
Джейсон Т Фезерингем

Просто обновление ... согласно MDN, так как Firefox 21 -moz-noneи noneто же самое.
Кевин Феган

2
Для этого вы можете добавить курсор: по умолчанию и курсор: текст соответственно
:)

Бомба. Так сказать. КОНЕЦ. ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[выделяет все в неупорядоченном списке и делает его невыбираемым, а не уничтожает все дерево представлений.] Спасибо за урок. Мой список кнопок выглядит великолепно и корректно реагирует на нажатие и нажатие экрана, а не на запуск IME (виджетов буфера обмена Android).
Hypersoft Systems

125

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

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


«Квартира» в отличие от чего?
kojow7

@ kojow7 В отличие от «слоистых». Вместо текста, плавающего поверх других элементов. Это похоже на разницу между изображениями SVG и PNG.
Йети

4
С удивлением обнаружил, что Firefox все еще требует префикса вендора в 2019 году. Я пренебрежительно использовал только user-select: none;, думая, что стандарт будет принят сейчас, но, к сожалению, это не так. Заставляет задуматься, о чем еще могут спорить люди в комитете по стандартам. «Нет, ребята ... Я действительно думаю, что так и должно быть, user-select: cant;потому что это более информативно, понимаете?» «Мы уже прошли через это, Майк. Мы должны были бы опустить апостроф, и это дурной тон!» «Достаточно, все! Мы снова обсудим этот вопрос в следующем месяце. Заседание комитета по стандартам отложено!»
Менталист

109

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

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

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

1
Не работает на PNG-изображениях с прозрачными областями: всегда будет выделяться голубым цветом ... Есть обходной путь?
AvL

80

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

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

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


1
Использование transparentвместо RGBA также работает в Chrome 42 на Android.
Клинт Пахл

77

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


5
Используйте -ms-user-select: нет; (для IE10) и ваше jQuery «если» должно быть следующим: if (($ .browser.msie && $ .browser.version <10) || $
.browser.opera

Будь осторожен, мужик !!! Чтобы сделать его выбираемым в Firefox, вы должны использовать-moz-user-select: Normal;
Nicolas Thery

7
@ mhenry1384 jQuery.browserустарела с версии 1.3 и удалена в версии 1.9 - api.jquery.com/jQuery.browser
WynandB

@Wynand Хорошая мысль. Но какой тип «обнаружения признаков» существует, чтобы определить, какое свойство CSS использовать?
Том Оже

@TomAuger Вы можете использовать jQuery.support, он позволяет проверять наличие отдельных функций: Ссылка
Aequanox,

69

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

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


3
Вы также можете использовать titleв качестве атрибута.
Зубная щетка

6
Это очень креативное решение. Особенно, если он использует атрибут title, потому что это, вероятно, будет лучше для программ чтения с экрана.
псевдосавант

4
Я попробовал это ( JSBin ), и это не работает в IE. К сожалению, старые IE - единственные, которые user-selectне работают.
псевдосавант

1
Это отличная альтернатива не JS, которая работает в Chrome! Потрясающие!
Сарикден

великолепно! ......
одиноко

69

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


59

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

3
Это работает в IE, если выбор начинается с элемента с classNameклассом. Смотрите этот JSBin .
псевдосавант

57

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

51

Быстрое обновление 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  */
}

48

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

За работой

CSS:

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

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


Свойство CSS без префикса должно находиться строго в конце списка префиксных версий свойства. Это хорошая правильная практика, другая - плохая практика - создавать «новый IE» из Chrome / Webkit и приводить к таким уродливым вещам, как введение поддержки префикса -webkit в не webkit-браузерах. Смотри, это было уже в 2012 году: dev.opera.com/articles/…
FlameStorm

И я цитирую:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.
FlameStorm

42

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

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

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


36

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

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


Хотя я согласен с тем, что это меняет поведение, которого ожидает пользователь, это будет иметь смысл для таких вещей, как кнопка «Добавить комментарий», которая находится рядом с этим полем формы ...
X-Istence

Но разве это не раскрывает ненужные детали реализации? Текст ввода или кнопки не может быть выбран.

@anon: Большинство пользователей, вероятно, не будут пытаться выбрать текст вашей кнопки, поэтому на практике это не должно иметь большого значения. Кроме того, чтобы сделать это, они должны будут начать выбор за пределами кнопки - если они нажмут внутри самой кнопки, вместо этого активируется обработчик onclick. Кроме того, некоторые браузеры (например, Safari) на самом деле позволяют вам выделять текст из обычных кнопок…
hbw

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

2
А что, если вы, например, дважды щелкнете по кнопке, которая вместо перенаправления на другую страницу открывает div? тогда текст для кнопки будет выбран из-за двойного щелчка!
Гигала

34

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

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

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


3
Есть несколько вещей, которые можно знать наверняка, но это решение определенно не работает во всех браузерах.
Фолькер Э.

33

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

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

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


30

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

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

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


1
Сделать это color: inherit;возможно.
Яаков Айнспан

да, я люблю это Это css селектор уровня 3 согласно документам Mozilla
Барик Дхармаван

29

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

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

28

НОТА:

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

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

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

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

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

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


1
У меня была такая же проблема. На Mac Chrome 48.0.2564.116 и на Mac Safari 9.0.3. Примечательно, что Mac Firefox 43.0 не копирует персонажа, а вставляет дополнительные концы между ними. Что с этим делать?
NHDaly

26

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

окончательный ответ, который работает
oldboy

23

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

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

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



21

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

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

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

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

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

p { color: white;  background: black; }

На выбор

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

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


Наверное, поэтому автозаполнение Netbeans не имеет понятия, о чем я говорю!
Halfer
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.