CSS отключить выбор текста

В настоящее время я поместил это в тег тела, чтобы отключить выбор текста:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Однако мои блоки input и textarea теперь не поддаются выбору. Как я могу сделать только эти входные элементы, а остальные не поддаются выбору?

Ответы

Ответ 1

Не применяйте эти свойства ко всему телу. Переместите их в класс и примените этот класс к элементам, которые вы хотите отключить select:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Ответ 2

Вы также можете отключить выбор пользователя для всех элементов:

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

И чем включить его на элементах, которые вы хотите, чтобы пользователь мог выбрать:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

Ответ 3

Просто хотел суммировать все:

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>

Ответ 4

::selection,::moz-selection {color:currentColor;background:transparent}

Ответ 5

Для этой цели используйте селектор wildcard *.

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Теперь каждый элемент внутри div с id div не будет иметь выбора.

Демо

Ответ 6

вы можете отключить весь выбор

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

теперь вы можете включить ввод и текстовую область

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}

Ответ 7

вместо body введите список требуемых элементов.

Ответ 8

Я согласен с Someth Victory, вам нужно добавить определенный класс к некоторым элементам, которые вы хотите не поддаваться выбору.

Кроме того, вы можете добавить этот класс в конкретных случаях, используя javascript. Пример здесь Невозможно выбрать контент с помощью CSS.

Ответ 9

Отключить выбор везде

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">