Як відключити виділення тексту виділенням тексту

Для якорів, які діють як кнопки (наприклад, Питання , Теги , Користувачі тощо вгорі сторінки переповнення стека) або вкладки, чи існує стандартний спосіб CSS для відключення ефекту виділення, якщо користувач випадково вибирає текст?

Я усвідомлюю, що це можна зробити за допомогою JavaScript, і трохи гуглінг дав -moz-user-selectваріант лише для Mozilla .

Чи існує стандартний спосіб досягти цього за допомогою CSS, а якщо ні, то який підхід "найкращої практики"?

ОНОВЛЕННЯ січня 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 .

У більшості браузерів цього можна досягти за допомогою власних варіантів user-selectвластивості CSS , спочатку запропонованих та потім відмовлених у CSS 3 та тепер запропонованих у CSS UI 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) все ще неможливо запобігти вибору, які починаються до та закінчуються після не виділеного елемента, не роблячи весь документ невибірним.

Рішенням JavaScript для Internet Explorer є:

onselectstart="return false;"

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

Звичайно, це не підтримується в браузерах, які не використовують механізм візуалізації Gecko.

Не існує швидкого і простого способу, який би відповідав "стандартам"; використання JavaScript - це варіант.

Справжнє запитання полягає в тому, чому ви хочете, щоб користувачі не мали змоги виділити та імовірно копіювати та вставляти певні елементи? Я жодного разу не стикався з тим, що хотів не дозволяти користувачам виділяти певну частину мого веб-сайту. Декілька моїх друзів, витративши багато годин на читання та написання коду, використовуватимуть функцію виділення як спосіб запам'ятати, де вони знаходяться на сторінці, або надати маркер, щоб їх очі знали, де шукати далі.

Єдине місце, де я міг би вважати це корисним, це якщо у вас є кнопки для форм, які не слід копіювати та вставляти, якщо користувач копіює та вставляє веб-сайт.

Якщо ви хочете відключити вибір тексту для всього, крім <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;
}

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

Це зробить ваш текст абсолютно рівним, як це було б у настільному додатку.

Це можна зробити в Firefox та Safari (Chrome також?)

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

Тимчасове рішення для WebKit :

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

Я знайшов це на прикладі CardFlip.

Мені подобається гібридне рішення 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()псевдоселектор. '*'Натомість ви можете використовувати, якщо вам все одно.

Caveat: Internet Explorer 9 може не потребувати цього додаткового фрагмента jQuery, тому ви можете додати там перевірку версії.

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

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

Це не найкращий спосіб.

Для цього можна використовувати 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>

Крім того, для Internet Explorer потрібно додати псевдокласfocus (.ClassName: фокус) та 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  */
}

Спробуйте вставити ці рядки в 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;
}

Швидке оновлення злому

Якщо ви використовуєте значення 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  */
}

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

Якщо ви використовуєте Менше і завантажувальний інструмент, ви можете написати:

.user-select(none);

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

Робочий

CSS:

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

Це має працювати, але це не працюватиме для старих браузерів. Виникає проблема сумісності браузера.

За допомогою SASS (синтаксис SCSS)

Це можна зробити за допомогою міксину :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

У тезі HTML:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Спробуйте в цьому CodePen .

Якщо ви використовуєте автопрефіксатор, ви можете видалити інші префікси.

Тут сумісність браузера .

Окрім властивості лише для Mozilla, немає, немає можливості відключити вибір тексту за допомогою лише стандартного CSS (на даний момент).

Якщо ви помітили, переповнення стека не вимикає вибір тексту для їх навігаційних кнопок, і я б рекомендував не робити цього в більшості випадків, оскільки це змінює нормальну поведінку вибору та змушує суперечити очікуванням користувача.

Це працює в деяких браузерах:

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

Інші відповіді кращі; це, мабуть, слід розглядати як крайній засіб / вигул.

Припустимо, є два divподібних:

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

Встановіть курсор за замовчуванням, щоб він давав користувачеві невідбірне відчуття.

Для його підтримки у всіх браузерах потрібно використовувати префікс. Без префікса це може не працювати у всіх відповідях.

Це стане в нагоді, якщо підбір кольору також не потрібен:

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

... всі інші виправлення браузера. Він буде працювати в Internet Explorer 9 або новішої версії.

Додайте це до першого div, у якому ви хочете відключити виділення для тексту:

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

ПРИМІТКА:

Правильна відповідь правильна тим, що вона не дозволяє вам вибрати текст. Однак це не заважає вам скопіювати текст, як я покажу з наступними парами скріншотів (станом на 7 листопада 2014 року).

Як бачите, нам не вдалося вибрати номери, але ми змогли їх скопіювати.

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

Щоб отримати потрібний мені результат, я виявив, що треба використовувати і те, ::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;
}

Це легко зробити за допомогою:

-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>. Вам доведеться видалити внутрішнійHTML цього 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.
}

Тепер він просто думає, що це блок-елемент, а не текст.

Це не CSS, але варто згадати:

jQuery UI Вимкнути вибір :

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

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

Хоча цей псевдоелемент був у чернетках CSS Selectors Level 3, його було вилучено під час фази рекомендації щодо кандидата, оскільки виявилося, що його поведінка була недостатньо визначеною, особливо з вкладеними елементами, і сумісність не була досягнута.

Це обговорюється в розділі Як :: вибір працює над вкладеними елементами .

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

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

p { color: white;  background: black; }

На відбір

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

Якщо заборона користувачам вибирати текст, це призведе до проблем використання.