CSS user-select — заборона виділення тексту

Властивість user-select керує поведінкою виділення тексту та інших елементів на сторінці, зокрема, дозволяє заборонити виділення тексту.

Зазвичай застосовується для інтерактивних елементів, на які можна клацати, наприклад, вкладки, і для яких виділення тексту небажано.

правити

Загальний опис

правити

Нотатка

Ця властивість дуже слабо підтримується сучасними браузерами, й рекомендується до використання з префіксами.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

user-select: auto | text | none | contain | all;

Властивість user-select може отримувати 5 значень:

none

Текст не можна виділяти.

автор: NagarD

правити

auto

Текст можна виділяти, якщо це дозволено без задання у браузері.

автор: NagarD

правити

all

Виділяє увесь текст в один клік.

автор: NagarD

правити

text

Текст можна виділяти.

автор: NagarD

правити

contain

Виділяє текст, якщо елемент можна редагувати.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	54	69	3*	41	79	10*

Підтримка: мобільні переглядачі

Переглядач
	54	54	79	3*

Приклади

+ запропонувати свій приклад у пісочниці

<p>Цей текст виділяється як звичайно.</p>
<p class="no">А цей виділити не вдасться — спробуй.</p>

.no {
    user-select: none;
}

<p>Звичайний абзац: виділяється як завжди, по буквах і словах.</p>

<code class="key">4f3c-9a11-77be-0d52</code>

<p class="tab">Вкладка з user-select: none</p>

body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px;
}

.key {
    display: block;
    margin: 12px 0 16px;
    padding: 8px 12px;
    background: #eef6ff;
    border: 1px solid #0172ad;
    font-family: monospace;
    user-select: all;
    -webkit-user-select: all;
}

.tab {
    display: inline-block;
    padding: 8px 14px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
}

<p>Цей приклад показує як працює властивість <code>user-select</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб додати/прибрати можливість виділення рядку тексту нижче.</p>

<div class="inputs">
  <input id="none" checked name="user-select" type="radio"/>
  <label for="none">none</label>
  <message for="none">Текст не можна виділяти.</message>

  <input id="auto" name="user-select" type="radio"/>
  <label for="auto">auto</label>
  <message for="auto">Текст можна виділяти, якщо це дозволено без задання у браузері.</message>
</div>

<p id="message">Текст можна виділяти, якщо це дозволено без задання у браузері.</p>

<hr>

<p id="block">Це текст. Просто текст для прикладу.</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#block {
  font-size: 1.75em; 
  user-select: none;
}

message {
  display: none;
}

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('user-select', this.id));

}));

<p>Це текст. Всі властивості мають значення без задання.</p>
<p class="not">А тут застосована властивість <strong>user-select</strong> й цей текст неможливо виділити курсором.</p>
<p>А цей знову можна виділити.</p>

body {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.45;
}

p {
  margin-bottom: 16px;
}

.not {
  user-select: none;
}