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

пятница, 27 марта 2015 г.

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

.disable-selection {
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (наподобие Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari и Opera */
  -webkit-touch-callout: none; /* Отключить вызовы в Android и iOS */
}



Правило -webkit-user-select работает и для Opera, поэтому не нужно отдельное правило -o-user-select.
-webkit-touch-callout отключает вызов всплывающей меню при выборе текста на Android и iOS устройствах.

Посмотреть demo.

Некоторые особенности:
- правило user-select не спасет на 100% от того, что текст можно выделить
- в некоторых случаях комбинация Ctrl+A (Выделить всё) все еще может срабатывать
- отключение выделения текста раздражает пользователей
- css валидатору не понравится правило user-select

Copyright © 2010 WEB IT blog