dr.Brain

doctor Brain

мир глазами веб-разработчика

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

отключаем для пользователей возможность выделить текст с помощью CSS

dr.Brain

время чтения 1 мин.

Photo by Lucas Liang on Unsplash

Попробуем отключить возможность выделения текста (как впрочем и всего остального содержимого веб-страницы) с помощью CSS-свойства user-select.

По умолчанию броузеры позволяют нам выбирать текст с помощью клавиатуры, например: нажав комбинацию CMD + A на устройствах с macOS, CTRL + A в случае, если Вы используете Windows, а также, просто, благодаря мыши или тачпаду.

Добавив элементу правило user-select: none, Вы отключите такую возомжность.

Только не забывайте про префиксы для различных броузеров. Внимательно изучите документацию на MDN и caniuse:

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

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

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

.selectable-text {
    user-select: text;
}

Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.