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

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

С помощью 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.

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

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

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

.user-select(none);

Работает

CSS:

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

Это должно работать, но не будет работать в старых браузерах. Возникла проблема совместимости браузера.

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

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

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

::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>. Вам нужно будет удалить 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.
}

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

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

jQuery UI Disable Selection:

$("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, он был удален на этапе рекомендации кандидата, поскольку оказалось, что его поведение было недостаточно определено, особенно с вложенными элементами, и совместимость не была достигнута.

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

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

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

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

Если вы хотите отключить выделение и выделение для всей страницы, вы можете легко сделать это с помощью CSS:

* {
    -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 */
}

Попробуйте использовать этот:

::selection {
    background: transparent;
}

И если вы хотите указать не выбирать внутри определенного элемента, просто поместите класс или идентификатор элемента перед правилом выбора, например:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}

Использовать:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Этот эффект выделения возникает из-за действия под названием hover (onMouseHover).

Когда вы наведете курсор на любую вкладку, ее цвет изменится.

Скажите, например,

HTML код

<div class="menu">
    <ul class="effect">
        <li>Questions</li>
        <li>JOBS</li>
        <li>Users</li>
    </ul>
</div>

CSS код

.effect:hover {
    color: none;
}

Вы можете использовать любой цвет, если хотите, чтобы он был выделен. В противном случае вы можете использовать none.

Для этого вы можете использовать свойство *-user-select, как показано ниже ...

p {
    -webkit-user-select: none;  /* Chrome all and Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* Internet Explorer 10 and later */
    user-select: none;          /* Likely future */
}

Ссылка для подробного описания

user-select в настоящее время поддерживается во всех браузерах.

Это все доступные правильные варианты CSS:

.noselect {
  -webkit-user-select: none;    /* Safari */
  -webkit-touch-callout: none;  /* iOS Safari */
  -khtml-user-select: none;     /* Konqueror HTML */
  -ms-user-select: none;        /* Internet Explorer/Edge */
  -moz-user-select: none;       /* Old versions of Firefox */
   user-select: none;           /* Non-prefixed version*/
}

<p>
  Selectable
</p>

<p class="noselect">
  Unselectable
</p>

Добавьте в свой CSS класс, который определяет, что вы не можете выбирать или выделять элемент. У меня есть пример:

<style> 
    .no_highlighting{
        user-select: none;
    }

    .anchor_without_decoration:hover{
        text-decoration-style: none;
    }
</style>

<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>

С помощью CSS-

div {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;

  "unselectable='on' onselectstart="return false;"
  onmousedown="return false;
}

<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

Вы пробовали это?

.disableSelect{
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;

    pointer-events:none;
}

Я объединил различные атрибуты выбора CSS браузера с невыбираемым тегом, необходимым для Internet Explorer ‹9.

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer 10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>

Более того, вы можете отключить выделение текста.

Если вам нравится Sass (SCSS), и вы не хотите использовать Compass, вы можете сделать это:

styles.scss

@mixin user-select($select) {
    -webkit-touch-callout:#{$select};
    @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
        #{$pre + user-select}: #{$select};
    }
    #{user-select}: #{$select};
}

.no-select {
    @include user-select(none);
}

Решение для Internet Explorer на основе JavaScript:

onselectstart="return false;"

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

*{
    -webkit-user-select: none;
 }

Возможно, вы сможете использовать это решение через :before:

nav li {
    display: inline-block;
    position: relative;
}

nav li a {
    display: inline-block;
    padding: 10px 20px;
}

nav li a:hover {
    color: red;
}

nav li.disabled:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<nav>
    <ul>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

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

$("body").on("contextmenu",function(e){
    return false;
});

Правильное решение для CSS:

Есть ошибка без резолвера, поэтому мы можем ее использовать:

::-moz-selection {
}

::selection {
}

И вуаля, подсветки нет, но из-за ошибки или фичи?

Вот демонстрация, попробуй выделить текст !!!

Это может сработать

    ::selection {
        color: none;
        background: none;
    }
    /* For Mozilla Firefox */
    ::-moz-selection {
        color: none;
        background: none;
    }