Для якорей, которые действуют как кнопки (например, вопросы, теги, пользователи и т.д. вверху страницы Stack Overflow) или вкладки, есть стандартный способ 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, Opera and Firefox */
}<p>
Selectable text.
</p>
<p class="noselect">
Unselectable text.
</p>В большинстве браузеров это может быть достигнуто с использованием собственных свойств свойства 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) все еще невозможно предотвратить выбор, который начинается до и после невыбранного элемента, не делая весь документ невыбираемым.
Решение JavaScript для Internet Explorer:
onselectstart="return false;"
Пока не появится свойство CSS 3 user-select, Gecko основанные браузеры поддерживают свойство -moz-user-select, которое вы уже нашли. WebKit, а браузеры на основе blink поддерживают свойство -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;
-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, поэтому вы можете добавить туда проверку версии.
.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>Кроме того, для Internet Explorer вам необходимо добавить класс псевдокласса (.ClassName: focus) и контурный стиль: none.
.ClassName,
.ClassName:focus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline-style:none;/*IE*/
}
Попробуйте вставить эти строки в 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;
}
Быстрое обновление Hack
Если вы используете значение none для всех свойств CSS user-select (включая префиксы браузера), это может привести к возникновению проблемы.
.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-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 */
}
-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;
Это должно работать, но оно не будет работать для старых браузеров. Проблема совместимости с браузером.
Для тех, у кого есть проблемы с достижением того же в браузере 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;
}
Если вы используете Less и Bootstrap вы могли бы написать:
.user-select(none);
Помимо свойства Mozilla, нет, нет способа отключить выбор текста с помощью стандартного CSS (на данный момент).
Если вы заметили, что Qaru не отключает выбор текста для своих кнопок навигации, и я бы рекомендовал не делать этого в большинстве случаев, поскольку он изменяет обычное поведение выбора и делает его противоречивым с ожиданиями пользователей.
Это работает в некоторых браузерах:
::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
Просто добавьте нужные элементы /ids перед селекторами, разделенными запятыми без пробелов, например:
h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}
Другие ответы лучше; это, вероятно, следует рассматривать как последнее средство/уловку.
Предположим, что существует два 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>Это будет полезно, если выбор цвета также не требуется:
::-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;
}
Это не CSS, но стоит упомянуть:
$("your.selector").disableSelection();
Проверьте мое решение без JavaScript:
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>Хотя этот псевдоэлемент был в проектах CSS Selectors Level 3, он был удален во время этапа рекомендации кандидата, поскольку оказалось, что его поведение было недоопределено, особенно с вложенными элементами, и интероперабельность не была достигнута.
Обсуждается в Как:: выбор работает на вложенных элементах.
Несмотря на то, что он внедряется в браузере, вы можете сделать иллюзию того, что текст не будет выбран с использованием того же цвета и цвета фона при выборе в соответствии с дизайном вкладки (в вашем случае).
p { color: white; background: black; }
p::-moz-selection { color: white; background: black; }
p::selection { color: white; background: black; }
Запрет пользователям выбирать текст вызовет проблемы с удобством использования.
Я узнал из CSS-Tricks веб-сайта.
user-select: none;
И это также:
::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: 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>. Вам придется удалить 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.
}
Теперь он просто думает, что это блок-элемент, а не текст.