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

93

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

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

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

css

— Нил
источник

Я могу выбирать inputи textareaэлементы: jsfiddle.net/Smy26

— Sampson

Похоже, что webkit позволяет выбирать эти элементы, а moz - нет.

— Christian

5

возможный дубликат правила CSS для отключения выделения выделенного текста

— Mottie

172

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

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

— Someth Victory
источник

3

Не поддерживается в Chrome, Safari.

— knutole

5

@knutole Прочтите таблицу еще раз. Значение из elementне поддерживается в Chrome / Safari.

— MForMarlon 05

32

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

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

— Рик
источник

1

Для полной поддержки браузера вы должны добавить следующие атрибуты в свой элемент <body> или <div>: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * используйте осторожно, последний атрибут может ВЛИЯТЬ НА СУЩЕСТВУЮЩУЮ ФУНКЦИОНАЛЬНОСТЬ * /

— Дэн

11

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

.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;"/>

— Meglio
источник

1

Старые версии Firefox могли потребовать добавления еще одного атрибута в HTML: onmousedown = "return false"

— Дэн

2

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

— BT
источник

Как указано здесь w3schools.com/cssref/sel_selection.asp . Пока это не является частью какой-либо спецификации CSS, а Firefox требует -moz-. Итак, правильным должно быть: :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}

— Владислав

1

@Vladislav Хорошее замечание о префиксе moz. Честно говоря, не верьте w3schools. Это такой ужасный источник. MDN дает актуальные версии совместимости браузеров и отмечает, что :: selection был удален из черновика CSS, НО был добавлен обратно: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Еще одно замечание, firefox готов убрать необходимость в префиксе: bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

2

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

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

— Шахнаваз
источник

1

*Для этой цели используйте селектор с подстановочными знаками.

#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 с идентификатором не divбудет иметь выбора.

Демо

— Starx
источник

0

вместо того, чтобы bodyввести список нужных элементов.

— Эрик Фортис
источник

0

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

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

— Стариковы
источник

0

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

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

— Cristianojeda
источник