CSS вимкнути виділення тексту

93

Наразі я помістив це в тег body, щоб вимкнути виділення тексту:

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

Однак мій inputі textareaкоробки зараз не можна вибрати. Як я можу лише зробити ці вхідні елементи вибором, а решту не можна вибрати?

css

— Ніл
джерело

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

— Семпсон

Схоже, webkit дозволяє виділяти ці елементи, а Moz - ні.

— Крістіан

5

можливий дублікат правила CSS для вимкнення виділення тексту

— Мотті

172

Не застосовуйте ці властивості до всього тіла. Перемістіть їх у клас і застосуйте цей клас до елементів, які потрібно відключити, select:

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

— Щось Перемога
джерело

3

Не підтримується в Chrome, Safari.

— knutole

5

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

— MForMarlon

31

Ви також можете вимкнути вибір користувача для всіх елементів:

* {
    -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;"/>

— Мельйо
джерело

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 надає фактичні версії сумісності браузера та зазначає, що :: виділення було видалено з чернетки 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
джерело