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

вопрос создан в Sun, May 12, 2019 12:00 AM

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

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

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

    
4776
  1. могут ли элементы внутри элемента, у которого выделение отключено, включено выделение с помощью in css в атрибуте style или class? или, другими словами, есть ли другие значения для -webkit-user-select ect. кроме просто нет?
    2011-03-14 21: 18: 15Z
  2. Связанный: stackoverflow.com/questions/16600479/… = как разрешить использование только некоторых дочерних элементов выбран
    2013-05-17 02: 36: 13Z
  3. В некоторых браузерах есть ошибка, при которой выполнение "Выбрать все" (CTRL + A и CMD + A) по-прежнему выделяет вещи. С этим можно бороться с прозрачным выделением цвета: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
    2014-12-12 01: 03: 56Z
  4. Могу я просто сказать: пожалуйста, не делайте этого. Исходя из моего опыта, я чаще всего хочу выбрать какой-либо текст, который также служит кнопкой, чтобы скопировать и вставить его в другое место. Было бы невообразимо бешено не иметь возможности сделать это, потому что какой-то веб-разработчик старался отключить эту функцию для меня. Поэтому, пожалуйста, не делайте этого, если у вас нет очень, очень веской причины.
    2016-08-30 20: 10: 51Z
  5. @ cram2208 Я согласен, за исключением того, что другой связанный вопрос является дубликатом. Этот вопрос старше и имеет больше /лучше ответов.
    2016-12-15 19: 14: 23Z
30 ответов                              30                         

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

6862
2018-10-31 15: 02: 48Z
  1. хороший код molokoloco: D, хотя лично я бы держался подальше от его использования, так как иногда вам могут понадобиться разные значения для разных браузеров, и это зависит от JavaScript. Создание класса и добавление его к вашему элементу или применение CSS к элементу вашего типа в вашей таблице стилей - довольно пуленепробиваемое доказательство.
    2011-01-14 13: 07: 07Z
  2. 'user-select' - значения: nодин | текст | переключить | элемент | элементы | все | наследовать - w3.org/TR/2000/WD-css3-userint- 20000216
    2011-03-21 09: 44: 40Z
  3. На самом деле -o-user-select не реализован в Opera. Вместо этого он реализует атрибут unselectable IE.
    2011-07-03 10: 52: 17Z
  4. По какой-то причине это само по себе не работало в IE8, затем я добавил <div onselectstart="return false;"> в свой основной div.
    2012-01-20 08: 11: 49Z
  5. это просто смешно! так много разных способов сделать одно и то же. давайте сделаем новый стандарт для пользовательских выборов. мы назовем это 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;. ах, намного лучше.
    2012-09-04 16: 19: 11Z

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

    
794
2015-08-03 08: 51: 02Z
  1. вы должны удалить селектор * из вашего примера, он действительно неэффективен, и действительно нет необходимости использовать его в вашем примере?
    2011-01-14 13: 15: 46Z
  2. @ Blowsie: я так не думаю: спецификация CSS 2 гласит, что *.foo и .foo точно эквивалентны (во втором случае универсальный селектор (*) равен подразумевается), поэтому, за исключением странностей браузера, я не вижу, чтобы включение * повредило производительности. Моя давняя привычка включать *, который я изначально начал делать для удобства чтения: он однозначно утверждает, что автор намеревается сопоставить все элементы.
    2011-01-14 13: 24: 43Z
  3. оооо после некоторого дальнейшего чтения кажется * неэффективным только при использовании его в качестве ключа (самый правый селектор), т.е. .unselectable *. Дополнительная информация здесь code.google.com/speed/page-speed /документы /...
    2011-01-14 13: 49: 02Z
  4. Вместо использования class = "unselectable", просто используйте селектор атрибута [unselectable = "on"] {…}
    2012-01-26 19: 39: 16Z
  5. @ Франциск: Нет. Как я уже говорил ранее в комментариях к Блоуси, в этом нет абсолютно никакой разницы.
    2012-04-25 09: 32: 26Z

Решением JavaScript для IE является

onselectstart="return false;"
    
181
2012-03-28 20: 10: 06Z
  1. Не забудьте о ondragstart!
    2010-05-26 13: 25: 39Z
  2. еще одна вещь здесь. Если вы добавите это в тело, вы не сможете выделять текст внутри текстовых полей или полей ввода в IE. То, как я исправил это для IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
    2013-05-30 16: 56: 05Z
  3. Это можно добавить в качестве атрибута с помощью jQuery - $("p"). attr ("onselectstart", "return false"). Это был единственный надежный метод для я в IE8
    2013-06-05 15: 06: 46Z
  4. почему я использую javascript, когда у меня есть решения для нескольких CSS! ..
    2013-10-31 10: 43: 03Z
  5. @ Abudayah, потому что они не работают в более старых версиях Internet Explorer? Вот и весь смысл этого ответа.
    2013-10-31 13: 27: 22Z

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

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

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

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

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

    
176
2016-04-17 05: 17: 40Z
  1. Кнопки были бы именно моей мотивацией.
    2009-05-05 20: 47: 17Z
  2. Еще одна причина, по которой это необходимо, - нажатие Shift для выбора нескольких строк в сетке или таблице. Вы не хотите выделять текст, вы хотите, чтобы он выделял строки.
    2010-01-06 16: 08: 11Z
  3. Существуют также юридические проблемы, когда чей-либо контент юридически переиздается, но пункт лицензии требует, чтобы веб-издатели препятствовали легкому копированию и вставке текста. Вот что привело меня к поиску этого вопроса. Я не согласен с требованием, но компания, с которой я заключаю контрактили юридически обязана реализовать это таким образом.
    2011-03-15 20: 34: 20Z
  4. @ CraigM Стиль css не мешает человеку захватить источник HTML и скопировать его. Если вы хотите защитить свой контент, вам придется искать более эффективные способы.
    2013-12-26 23: 25: 50Z
  5. Интерактивное веб-приложение с широкими возможностями перетаскивания. drop ... случайное выделение - большая проблема с юзабилити.
    2014-06-03 21: 08: 07Z

Если вы хотите отключить выделение текста для всех элементов, кроме элементов <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;
}
    
129
2013-10-29 17: 09: 31Z
  1. Убедитесь, что вы также можете выбирать поля ввода: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
    2011-07-07 22: 39: 56Z
  2. Будьте очень осторожны с отключением ожиданий пользовательского интерфейса браузера для ВСЕГО кода, кроме одного элемента. Как насчет элементов списка < li /> текст, например?
    2011-11-12 07: 13: 45Z
  3. Просто обновление ... согласно MDN, поскольку Firefox 21 -moz-none и none одинаковы.
    2013-12-25 15: 56: 37Z
  4. Для этого вы можете добавить курсор: по умолчанию и курсор: текст соответственно:)
    2014-07-14 17: 14: 41Z

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

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

    
117
2016-09-10 04: 18: 34Z
  1. "Плоский" в отличие от чего?
    2018-02-09 20: 55: 53Z
  2. @ kojow7 В отличие от "слоистых". Вместо текста, плавающего поверх других элементов. Это похоже на разницу между изображениями SVG и PNG.
    2018-09-19 09: 35: 59Z
  3. С удивлением обнаружил, что Firefox все еще требует префикс поставщика в 2019 году. Я пренебрежительно использовал только user-select: none;, думая, что стандарт будет принят сейчас, но, к сожалению, нет. Заставляет задуматься, о чем еще могут спорить люди в комитете по стандартам. «Нет, ребята ... Я действительно думаю, что это должно быть user-select: cant;, потому что это как-то более наглядно, понимаете?» «Мы уже прошли через это, Майк. Мы должны были бы опустить апостроф, и это дурной тон!» «Хватит, всем! Мы снова обсудим этот вопрос в следующем месяце. Заседание комитета по стандартам отложено!»
    2019-05-24 03: 19: 36Z

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

::selection { background: transparent; }
::-moz-selection { background: transparent; }
    
103
2013-10-29 17: 09: 38Z
  1. Я не рекомендовал бы делать это, потому что это фактически не решает проблему; отключение выделения текста - оно просто скрывает это. Это может привести к плохому удобству использования, потому что, если я перетаскиваю курсор по странице, я могу выбрать любой произвольный текст, не зная его. Это может вызвать всевозможные странные юзабилити-ошибки.
    2011-02-02 15: 01: 40Z
  2. Не работает на PNG-изображениях с прозрачными областями: всегда будет выделяться светло-голубым ... Любое решение?
    2013-09-18 21: 12: 27Z

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

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

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

    
76
2013-10-29 17: 09: 46Z
  1. Использование transparent вместо rgba также работает в Chrome 42 на Android.
    2015-04-29 20: 46: 35Z

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

    
68
2013-10-29 17: 09: 54Z
  1. Использовать -ms-user-select: none; (для IE10) и ваше jQuery "if" должно быть следующим: if (($.browser.msie & $.browser.version < 10) || $.browser.opera)
    2013-01-31 03: 42: 15Z
  2. Будьте осторожны, человек !!! Чтобы сделать его доступным в Firefox, вы должны использовать -moz-user-select: Normal;
    2013-03-10 16: 53: 37Z
  3. 2013-03-11 13: 44: 40Z
  4. @ mhenry1384 jQuery.browser устарел с версии 1.3 и удален в версии 1.9 - api.jquery.com/jQuery.browser
    2013-03-14 23: 58: 05Z
  5. @ Wynand Хороший вопрос. Но какой тип «обнаружения признаков» существует, чтобы определить, какое свойство CSS использовать?
    2013-03-15 13: 28: 36Z

р>

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

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

    
66
2017-06-16 02: 37: 53Z
  1. Вы также можете использовать title в качестве атрибута.
    2014-05-07 16: 50: 34Z
  2. Это очень креативное решение. Особенно, если он использует атрибут title, потому что это, вероятно, будет лучше для программ чтения с экрана.
    2014-09-16 21: 49: 55Z
  3. Я попробовал ( JSBin ) и он не работает в IE. К сожалению, старые IE - единственные, для которых user-select не работает.
    2014-09-16 21: 58: 23Z
  4. Это отличная альтернатива не JS, которая работает в Chrome! Отлично!
    2018-11-06 15: 05: 40Z

Для этого вы можете использовать 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>
    
63
2018-05-14 13: 52: 42Z
  1. Версия JavaScript не полностью работает, как задумано. Если вы начнете выделять текст, а затем переместите курсор вверх, текст будет выделяться очень хорошо.
    2018-05-14 13: 48: 05Z
  2. @ Gh61 это потому, что он был применен к телу, а фрагмент кода выполнения создает вокруг него html-тег, поэтому, если он применяется к < html > это будет сделано, посмотрите на обновление
    2018-05-14 13: 54: 13Z

Кроме того, для 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*/
}
    
58
2014-11-26 00: 29: 02Z
  1. Это работает в IE, если выбор начинается с элемента с классом className. Смотрите этот JSBin .
    2014-09-16 22: 01: 32Z

Попробуйте вставить эти строки в 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;
}
    
57
2018-11-30 10: 48: 04Z
  1. Похоже, что копия принятого ответа, за исключением того, что вы по какой-то причине добавили cursor: default в середине. Лицо, задавшее вопрос, не просило, чтобы для cursor было установлено значение default.
    2016-12-13 09: 22: 29Z
  2. Мой исходный код.
    2016-12-13 11: 20: 59Z
  3. Вы можете ввести, однако общий код является прямой копией этого на первой странице этой темы: stackoverflow.com/a/4407335/3016335 .
    2016-12-13 13: 36: 52Z
-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');
    
47
2013-10-29 17: 11: 03Z

Для тех, у кого проблемы с достижением того же в браузере 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;
}
    
47
2016-04-17 04: 53: 43Z
  1. @ Volker E. ну, он ДАЕТ, что это только для браузера Android, вы можете просто добавить это к другим ответам вместо того, чтобы быть саркастичным.
    2016-01-07 21: 33: 05Z

В

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
2016-04-17 04: 58: 37Z
  1. Свойство CSS без префикса должно находиться строго в конце списка префиксных версий свойства. Это хорошая правильная практика, другая - плохая практика - создавать «новый IE» из Chrome /Webkit и приводить к таким уродливым вещам, как введение поддержки префикса -webkit в не webkit-браузерах. Посмотрите, это было уже в 2012 году: dev.opera.com /статьи /...
    2017-03-21 22: 52: 27Z
  2. И я цитирую: 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.
    2017-03-21 22: 52: 47Z

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

.user-select(none);
    
46
2016-04-17 05: 09: 44Z

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

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

    
34
2009-05-05 20: 38: 05Z
  1. Хотя я согласен с тем, что это меняет поведение, которого ожидает пользователь, это будет иметь смысл для таких вещей, как кнопка «Добавить комментарий», которая находится рядом с этим полем формы ...
    2009-05-05 20: 40: 33Z
  2. Но разве это не раскрывает ненужные детали реализации? Текст ввода или кнопки не может быть выбран.
    2009-05-05 20: 40: 46Z
  3. @ anon: Большинство пользователей, вероятно, не будут пытаться выбрать текст вашей кнопки, поэтому на практике это не должно иметь большого значения. Кроме того, для этого им придется начать выбирать снаружи кнопки - если они нажмут внутри самой кнопки, вместо этого активируется обработчик onclick. Кроме того, некоторые браузеры (например, Safari) на самом деле позволяют выбирать текст обычных кнопок ...
    2009-05-05 20: 49: 07Z
  4. Если вы выбираете набор комментариев из цепочки чатов, и у каждого комментария есть кнопка повышения /понижения, тогда было бы неплохо выбрать текст без других вещей. Это то, что пользователь ожидает или хочет. Он не хочет копировать /вставлять ярлыки кнопок с каждым комментарием.
    2013-08-03 16: 52: 21Z
  5. А что если вы, например, дважды щелкнете по кнопке, которая вместо перенаправления на другую страницу открывает div? тогда текст для кнопки будет выбран из-за двойного щелчка!
    2014-07-25 11: 32: 26Z

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

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

Остальные ответы лучше; это, вероятно, следует рассматривать в качестве крайней меры.

    
33
2016-04-17 04: 54: 48Z
  1. Есть несколько вещей, которые можно знать наверняка, но это решение определенно не работает во всех браузерах.
    2014-09-30 09: 27: 40Z
  2. они почему вы говорите все браузеры .. ясно, что вы можете лучше редактировать свой ответ
    2014-11-13 14: 03: 21Z
  3. @ scx цель ответа состояла в том, чтобы предоставить отправную точку. как видите, ответы намного лучше, чем мои в любом случае. если у меня будет время, чтобы еще раз попытаться решить эту проблему в будущем, я поэкспериментирую и посмотрю, что я смогу придумать.
    2014-11-14 11: 13: 01Z

    Предположим, есть два 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
    2016-06-24 11: 57: 45Z

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

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

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

        
    29
    2016-04-17 05: 01: 40Z
    1. Возможно, это color: inherit;.
      2016-07-28 01: 25: 09Z
    2. да, мне это нравится. Это селектор уровня 3 уровня в соответствии с документами Mozilla
      2018-01-28 10: 37: 47Z

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

    onmousedown='return false;' 
    onselectstart='return false;'
    
        
    28
    2013-03-10 19: 58: 20Z

    Примечание:

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

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

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

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

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

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

        
    28
    2016-04-17 04: 52: 51Z
    1. У меня была такая же проблема. На Mac Chrome 48.0.2564.116 и на Mac Safari 9.0.3. Примечательно, что Mac Firefox 43.0 не копирует персонажа, а вставляет дополнительные концы между ними. Что с этим делать?
      2016-03-05 01: 34: 58Z

    Быстрое обновление хака: март 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 */   
    }
    
        
    27
    2019-05-11 16: 57: 45Z

    Чтобы получить нужный мне результат, я обнаружил, что должен использовать ::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
    2016-01-15 08: 24: 09Z

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

    Выбор отключения пользовательского интерфейса jQuery :

    $("your.selector").disableSelection();
    
        
    22
    2013-04-09 16: 42: 23Z
    1. Устаревший с версии 1.9 ...
      2013-06-18 21: 18: 15Z

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

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

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

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

    p { color: white;  background: black; }
    

    На выбор

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

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

        
    21
    2016-04-17 04: 57: 31Z
    1. Наверное, поэтому автозаполнение Netbeans не имеет понятия, о чем я говорю!
      2014-04-26 20: 16: 19Z

    Проверьте мое решение без 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
    2016-04-17 05: 00: 08Z

    Я узнал об этом на сайте CSS-Tricks .

    user-select: none;
    

    И это тоже:

    ::selection{ background-color: transparent;}
    ::moz-selection{ background-color: transparent;}
    ::webkit-selection{ background-color: transparent;}
    
        
    15
    2016-04-01 11: 16: 39Z

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

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

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

        
    14
    2018-11-20 18: 57: 48Z
источник размещен Вот
Другие вопросы