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


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

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

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


4293


источник


Ответы:


ОБНОВЛЕНИЕ Январь 2017 года:

В соответствии с Могу ли я использовать , user-selectв настоящее время поддерживается во всех браузерах, кроме Internet Explorer 9 и более ранних версий (но, к сожалению, все еще требуется префикс поставщика).


Все правильные варианты CSS:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


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


Более подробную информацию можно найти в Документация разработчика Mozilla Developer Network ,


6287



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


719



JavaScript-решение для IE

onselectstart="return false;"

163



Until CSS 3's user-select property becomes available, Gecko-based browsers support the -moz-user-select property you already found. WebKit and Blink-based browsers support the -webkit-user-select property.

This of course is not supported in browsers that do not use the Gecko rendering engine.

There is no "standards" compliant quick-and-easy way to do it; using JavaScript is an option.

The real question is, why do you want users to not be able to highlight and presumably copy and paste certain elements? I have not come across a single time that I wanted to not let users highlight a certain portion of my website. Several of my friends, after spending many hours reading and writing code will use the highlight feature as a way to remember where on the page they were, or providing a marker so that their eyes know where to look next.

The only place I could see this being useful is if you have buttons for forms that should not be copy and pasted if a user copy and pasted the website.


154



If you want to disable text selection on everything except on <p> elements, you can do this in CSS (watch out for the -moz-none which allows override in sub-elements, which is allowed in other browsers with 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;
}

118



In the above solutions selection is stopped, but the user still thinks you can select text because the cursor still changes. To keep it static, you'll have to set your CSS cursor:

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

This will make your text totally flat, like it would be in a desktop application.


108



You can do so in Firefox and Safari (Chrome also?)

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

99



Workaround for WebKit:

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

I found it in a CardFlip example.


71