Как сделать чтобы нельзя было выделить текст css
Перейти к содержимому

Как сделать чтобы нельзя было выделить текст css

  • автор:

Как запретить выделение текста? [дубликат]

Как я могу запретить выделение текста в определенном элемента?

Отслеживать

задан 22 авг 2016 в 8:18

user192664 user192664

22 авг 2016 в 8:20

и на js решение: learn.javascript.ru/unselectable

22 авг 2016 в 8:21

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.unselectable < -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ >
 

Selectable text.

Unselectable text.

Больше информации здесь.

Отслеживать

ответ дан 22 авг 2016 в 8:22

user192664 user192664

А как сделать, чтобы value в Input нельзя было выделить? из статьи на Хабре просто сразу говориться (кроме элементов INPUT и TEXTAREA)

CSS стиль user-select. Изменение выделения текста с помощью user-select

CSS стиль user-select управляет поведением выделения текста и других элементов на странице. Это незаменимое CSS свойство когда нужно запретить выделение текста.

Internet Explorer поддерживает свойство -ms-user-select.

Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select.

Firefox поддерживает свойство -moz-user-select.

Значение contain поддерживается только в IE.

Чаще всего CSS стиль user-select применяется для кликабельных интерактивных элементов, для которых нежелательно выделение текста.

Краткая информация по CSS-свойству user-select

Значение по умолчанию auto
Наследуется Да
Применяется Ко всем элементам

Правила написания свойства user-select

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

Пройдемся теперь по всем значениям.

auto — для редактируемых элементов значение принимается contain. Если у родительского элемента user-select установлено как all (none), то для элемента оно тоже будет all (none). Во всех остальных случаях принимается значение text.

none — пользователю запрещается выделять элемент.

text — пользователь может выделить текст в элементе.

all — позволяет выделить текст внутри элемента, включая дочерние элементы.

contain — позволяет выделять текст, но лишь внутри элемента.

Пример применения стиля user-select

Проиллюстрируем работу user-select на примере. Давайте сделаем так, чтобы верхний текст нельзя было выделить. Не забудьте про кроссбраузерное написание user-select.

    Пример CSS стиля user-select body < -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; >.enable 

Ха! А этот текст нельзя выделить

Этот текст тоже выделяется

Применение свойства user-select

Популярные статьи

2D игра на Unity. Подробное руководство. Часть 1

  • unity

Адаптивный слайдер без Javascript на CSS3

  • слайдер

Как сделать чтобы нельзя было выделить текст css

Создание игр на Unreal Engine 5

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

Уроки и статьи

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube

Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка

Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт

Мой аккаунт Моя группа

Как запретить выделение текста с помощью CSS

Чтобы запретить выделение текста с помощью CSS, воспользуемся свойством user-select ; однако оно не входит в спецификацию и не поддерживается популярными браузерами, поэтому без вендорных префиксов не обойтись:

-moz-user-select: none; /* Mozilla Firefox */ -ms-user-select: none; /* Internet Explorer (не поддерживается) */ -o-user-select: none; /* Opera Presto (не поддерживается) */ -webkit-user-select: none; /* Google Chrome, Opera Next, Safari */

Свойства -op-user-select и -xv-user-select для Opera Presto также не работают.

Итого: запретить с помощью CSS выделять текст можно только в Google Chrome, Mozilla Firefox, Opera Next и Safari.

Пример

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *