Как отменить выделение текста css

Как убрать выделение текста css

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

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

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

Использование CSS для управления выделением текста

CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа. Это может помочь улучшить юзабилити в определенных ситуациях и добавить немного визуального чутья.

Выделить всё

Иногда бывает полезно, чтобы весь текст в элементе автоматически выделялся при нажатии на него. Это особенно удобно для текста, который копируется/вставляется полностью (фрагменты кода, одноразовые пароли, промокоды и т.д.).

Это можно сделать с помощью только простого CSS и без какого-либо JavaScript!

Выделить всё… Затем выделить часть

Хотя это работает должным образом, можно заметить кое-что неприятное: невозможно выбрать что-то отдельное, кроме всего фрагмента кода. Хорошо бы первым кликом выбрать всё, но оставить возможность кликнуть ещё раз и выбрать только часть. Это можно сделать, всё ещё, с помощью только CSS.

Во-первых, надо использовать tabindex , чтобы сделать HTML-элемент, содержащий текст, доступным для фокусировки. Это позволит CSS узнать о клике по HTML-элементу.

Теперь немного CSS.

Идея состоит в том, чтобы сначала установить для HTML-элемента CSS-свойство user-select: all , а затем, когда фокус переместится на этот элемент, переключиться на «обычный» user-select: text , чтобы текст можно было выбирать по частям. Выбор времени переключения — дело непростое. Если сделать переключение сразу после перемещения фокуса на элемент, то от user-select: all не будет никакого эффекта, т.к. оно успеет сменить значение на text . Поможет решить проблему animation .

CSS-свойство user-select можно анимировать. Оно дискретно анимированное, это означает, что нет постепенной интерполированной анимации, по истечении указанного времени происходит немедленный переход от одного состояния к другому. Поэтому, можно использовать animation , чтобы отложить изменение поведения выделения текста до 100 миллисекунд после передачи фокуса HTML-элементу.

Предотвращение выделения текста

CSS можно использовать ещё и для того, чтобы сделать текст в элементе недоступным для выбора, т.е. запретить выделение текста.

Это плохая идея для основного текста, но будет полезно для элементов управления, которые можно быстро переключать или «гневно щелкать» в настольных браузерах, поскольку двойной щелчок вызывает выбор текста и подсветку его выделения — выглядеть немного странно и дико.

Проверить можно в следующей демонстрации. Обратите внимание, как переключатель слева становится подсвеченным при быстром нажатии, а переключатель справа — нет.

Этот метод также работает с виджетами раскрытия содержимого (HTML-элемент details ) или фальшивыми кнопками — например, с обработчиком кликов на нём. Правда, использование настоящего элемента предпочтительнее не только с точки зрения семантики и доступности, но и потому, что текст в такой кнопке по умолчанию не может быть выделен, а это позволяет избежать проблемы с самого начала.

Выборочное выделение текста

Невыделяемый текст можно смешивать с выделяемым текстом. Невыделяемые части просто пропускаются при выборе текста и будут пропущены при копировании/вставке выделения.

В примере ниже используется user-select: none на числовых маркерах сносок. Поэтому, когда выделенное копируется/вставляется, маркеры автоматически удаляются.

Но это работает не во всех браузерах. Safari (iOS и компьютер) и Android Chrome по-прежнему будут копировать маркеры.

Стилизация выделения

Стилизовать выделенный текст можно с помощью псевдоэлемента ::selection . Однако настройки ограничены тремя CSS-свойствами: color , background-color и text-shadow (в спецификации их больше, но всё портит поддержка свойств браузерами).

Вот пример стилизации выделенного текста в HTML-элементе

.

Чтобы увидеть результат, выделяйте текст в примере ниже.

Немного особенностей

Есть еще одна декларация user-select: contain , которая должна ограничивать выделение текста внутри элемента, как это работает с . Однако, IE11 был последним браузером, который поддерживал это. В настоящее время значение contain не поддерживают все современные браузеры.

Тем не менее, все редактируемые элементы (такие как ) обрабатываются, как если бы они имели user-select: contain . Псевдоэлементы ::before и ::after нельзя выбрать, как если бы у них было установлено user-select: none . Изменить такое поведение не получится.

Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.

Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.

How to disable text selection highlighting

For anchors that act like buttons (for example, the buttons on the sidebar of this Stack Overflow page titled Questions, Tags, and Users) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

I realize that this could be done with JavaScript and a little googling yielded the Mozilla-only -moz-user-select option.

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the «best practice» approach?

45 Answers 45

UPDATE January, 2017:

According to Can I use, the user-select + -webkit-user-select for Safari is enough to achieve desired behavior in all major browsers.

These are all of the available correct CSS variations:

Note that user-select is in standardization process (currently in a W3C working draft). It is not guaranteed to work everywhere and there might be differences in implementation among browsers. Also, browsers can drop support for it in the future.

The values of this attribute are none , text , toggle , element , elements , all and inherit .

In most browsers, this can be achieved using proprietary variations on the CSS user-select property, originally proposed and then abandoned in CSS 3 and now proposed in CSS UI Level 4:

Sadly this property isn’t inherited, meaning you have to put an attribute in the start tag of every element inside the . If this is a problem, you could instead use JavaScript to do this recursively for an element’s descendants:

Update 30 April 2014: This tree traversal needs to be rerun whenever a new element is added to the tree, but it seems from a comment by @Han that it is possible to avoid this by adding a mousedown event handler that sets unselectable on the target of the event. See http://jsbin.com/yagekiji/1 for details.

This still doesn’t cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer and Firefox, for example) it’s still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.

Мышь: отмена выделения, невыделяемые элементы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/selection-range.

У кликов мыши есть неприятная особенность.

Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.

Если мы хотим обрабатывать эти события сами, то такое выделение – некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.

Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.

Способ 1: отмена mousedown/selectstart

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

Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является выделение текста браузером.

Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события selectstart в IE и mousedown в других браузерах.

Полный код элемента, который обрабатывает двойной клик без выделения:

При установке на родителя – все его потомки станут невыделяемыми:

Отмена действия браузера при mousedown/selectstart отменяет выделение при клике, но не запрещает его полностью.

Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это.

Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.

Способ 2: снятие выделения постфактум

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

Для этого мы используем методы работы с выделением, которые описаны в отдельной главе Выделение: Range, TextRange и Selection. Здесь нам понадобится всего лишь одна функция clearSelection , которая будет снимать выделение.

Пример со снятием выделения при двойном клике на элемент списка:

У этого подхода есть две особенности, на которые стоит обратить внимание:

• Выделение всё же производится, но тут же снимается. Это выглядит как мигание и не очень красиво.
• Выделение при помощи передвижения зажатой мыши всё ещё работает, так что посетитель имеет возможность выделить содержимое элемента.

Способ 3: свойство user-select

Существует нестандартное CSS-свойство user-select , которое делает элемент невыделяемым.

Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.

Это свойство работает (с префиксом) везде, кроме IE9-:

IE9-: атрибут unselectable=«on»

В IE9- нет user-select , но есть атрибут unselectable.

Он отменяет выделение, но у него есть особенности:

1. Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.
2. Во-вторых, текст, в отличие от user-select , всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.

Левая часть текста в IE не выделяется при двойном клике. Правую часть ( em ) можно выделить, т.к. на ней нет атрибута unselectable .

Итого

Для отмены выделения есть несколько способов:

CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).

Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)

Отмена действий на mousedown и selectstart :

Отмена выделения пост-фактум через функцию clearSelection() , описанную выше.

Какой же способ выбирать?

Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.

Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?

В любом случае эти способы не предназначены для защиты от выделения-и-копирования.

Если уж хочется запретить копирование – можно использовать событие oncopy :

Похожие публикации:

1. Как выиграть в игру шарики
2. Как скопировать папку в python
3. Как передать массив в конструктор c
4. Как слушать музыку на ласт фм

Как убрать выделение в тексте

Как убрать выделение текста в ворде если оно не убирается

Откройте документ Word во вкладке «Главная». Выделите весь текст в документе, или нужный фрагмент текста, который выделен цветом. В группе «Шрифт» нажмите на маленькую стрелку, находящуюся на кнопке «Цвет выделения текста». В выпадающем меню с палитрой цветов нажмите на пункт «Нет цвета».

Как убрать выделение горячие клавиши

Ctrl (Cmd) + D — универсальная команда, позволяющая снять выделение.

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

4.3. Снять выделение:

• Эта команда находится в меню изображения Выделение → Снять.
• У неё также есть клавиша быстрого доступа Shift+Ctrl+A.
• В добавок, в Редакторе выделения эту команду можно вызвать через Меню закладки: Меню редактора выделения → Снять или нажатием на кнопку с пиктограммой внизу этого диалога.

Как в PDF убрать выделение

Чтобы выключить режим выделения, нажмите кнопку «Выделить» еще раз. Удаление выделения цветом, подчеркивания или зачеркивания текста. Нажмите на текст, удерживая клавишу Control, и выберите пункт «Удалить объект» в контекстном меню.

Как убрать заливку в тексте

Как убрать фон текста в Word — 1 способ:

• Выделите фрагмент текста, из которого необходимо убрать фон.
• Войдите в меню «Главная», перейдите в группу «Абзац».
• Нажмите на кнопку «Заливка», выберите опцию «Нет цвета».

Какая то черточка в ворде Как убрать

Щелкните линию, соединитель или фигуру, которые вы хотите удалить, а затем нажмите клавишу DELETE. Совет: Чтобы удалить несколько линий или соединителей, щелкните их по очереди, удерживая нажатой клавишу CTRL, а затем нажмите клавишу DELETE.

Как отменить выделение области

Чтобы удалить лишнюю область из выделения, нажмите кнопку «Вычитание из выделенной области» на панели инструментов, нажмите левой кнопкой мыши или протащите инструмент, удерживая кнопку мыши, над удаляемой областью.

Какая клавиша позволяет выделить всё или отменить выделение всего

Примечание: Чтобы выделить весь документ, нажмите клавиши CTRL+A. Нажмите клавиши SHIFT+СТРЕЛКА ВПРАВО. Нажмите клавиши SHIFT+СТРЕЛКА ВЛЕВО. Установите курсор в начало слова и нажмите клавиши CTRL+SHIFT+СТРЕЛКА ВПРАВО.

Что такое Ctrl B

CTRL + B (завершение работы локального отладчика) — Windows drivers | Microsoft Learn.

Как запретить выделение

Запретить выделение текста мы можем с помощью CSS селектора user-select, задав ему значение none.

Как снять выделение с файла

Чтобы снять выделение со всех файлов, нажмите Ctrl+U, выберите пункт меню Правка → Отменить всё выделение или просто щёлкните по любому месту окна, не занятому значками. Также имеется возможность обратить выделение, то есть снять его со всех выделенных файлов и выделить остальные.

Как снять выделение с одного файла

Выделяйте левой кнопкой мыши любые несмежные файлы или каталоги, держа при этом нажатой клавишу Ctrl (снятие выделения с отдельного файла/каталога выполняется точно так же).

Как убрать выделение текста в Adobe Acrobat

Чтобы снять выделение текста (не удаляя текст), нажмите правой кнопкой мыши выделенный текст (Windows) или нажмите его, удерживая клавишу Control (macOS), и затем нажмите «Удалить».

Как удалить заливку в пдф

Удаление фона с выбранных страниц:

• Откройте файл PDF, содержащий фон.
• Выберите Инструменты > Редактировать PDF. Набор инструментов «Редактировать PDF» отображается на дополнительной панели инструментов.
• На дополнительной панели инструментов выберите Еще > Фон > Удалить.
• Нажмите Да, чтобы подтвердить удаление фона.

Как убрать следы редактирования PDF

Удаление метаданных из PDF-файла Перейдите на вкладку «Файл» и выберите опцию «Свойства» и «Описание». Затем вы можете просмотреть метаданные PDF-документа. Вы можете редактировать и удалять метаданные по своему усмотрению.

Как убрать заливку текстового поля в ворде

Выполните одно из следующих действий:

• Выберите нужный цвет.
• На указателе напункт Градиент и выберите нужный вариант градиента.
• Чтобы удалить заливки, выберите нет заливки.
• Чтобы удалить градиент заливки, на указателе на выберите пункт Градиенти выберите пункт Нет градиента.

Какая горячая клавиша отвечает за выделение

Сочетания клавиш для приложения Paint

Копирование выделения в буфер обмена

Открытие диалогового окна «Свойства»

Показ или скрытие линий сетки

Выделение выбранного текста курсивом

Что делает комбинация Ctrl A

Чтобы выделить ВСЕ объекты в папке или все данные в файле, одновременно нажимаем на клавиатуре клавиши Ctrl и A (А из английского алфавита, она же русская Ф).

Где находится инструмент Быстрое выделение

Инструмент расположен на инструментальной панели в верхней части, в одном кластере с «Волшебной палочкой». Также его можно выбрать нажатием клавиши W, либо, если на момент выбора первая в кластере «Волшебная палочка, клавишами Shift+W.

Как убрать подчеркивание скопированного текста в ворде

В контекстном меню выберите «Параметры» («Параметры Word»). В окне «Параметры Word» откройте «Правописание». В разделах «При исправлении правописания в Word» и «Исключения для файла» установите соответствующие настройки, в зависимости от того, в каких документах вам нужно отключить показ ошибок орфографии и грамматики.

02.06.2023 Как убрать выделение в тексте

Выделение текста — одна из наиболее часто используемых функций при работе с текстовыми документами. Однако иногда возникают ситуации, когда выделение нужно убрать или изменить. Наиболее простой способ убрать выделение из текста в программе Microsoft Word — выбрать нужный текст и нажать сочетание клавиш CTRL+D. Это универсальная команда, которая снимает выделение как из части документа, так и из всего документа целиком.

Если же выделение текста не убирается при помощи клавиш CTRL+D, следует применить другой метод. Для этого нужно выбрать весь текст в документе или нужный фрагмент, который выделен цветом. Затем необходимо перейти на вкладку «Главная» и выбрать стрелку рядом с цветом выделения текста. В открывшемся меню следует выбрать пункт «Нет цвета». Таким образом, выделение из текста будет удалено.

Что касается убирания выделения в PDF, здесь все также просто. Чтобы выключить режим выделения в PDF, следует нажать кнопку «Выделить» еще раз. Если же необходимо удалить выделение цветом, подчеркивания или зачеркивания текста, следует нажать на текст, удерживая клавишу Control, и выбрать пункт «Удалить объект» в контекстном меню.

Если в документе Word появилась какая-то лишняя черточка или линия, ее можно легко удалить. Для этого необходимо щелкнуть по линии, соединителю или фигуре, которые нужно удалить, и нажать клавишу DELETE. Если нужно удалить несколько линий или соединителей, следует щелкнуть их по очереди, удерживая нажатой клавишу CTRL, и затем нажать клавишу DELETE.

Чтобы отменить выделение области, нужно нажать кнопку «Вычитание из выделенной области» на панели инструментов, или просто щелкнуть левой кнопкой мыши или протащить инструмент, удерживая кнопку мыши, над удаляемой областью.

Существует также возможность выделить весь текст в документе с помощью клавиш CTRL+A. Если же нужно выделить только часть текста, можно использовать различные комбинации клавиш. Например, чтобы выделить всю строку, нужно установить курсор в начало строки и нажать клавиши SHIFT+END. Чтобы выделить всю абзац, нужно щелкнуть два раза мышью на нем либо установить курсор в его начало и нажать клавишу CTRL+SHIFT+END.

Таким образом, с помощью нескольких простых действий, можно удалять выделение из текста, убирать лишние линии и области, а также удобно выделять нужный текст.

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

Ранее были рассмотрены два варианта того, как запретить копирование контекста с сайта: с помощью JavaScript (легко обходится отключением JS в браузере) и с помощью прозрачного блока CSS на весь экран, который перекрывает доступ до элементов страницы (легко обходится, удалением этого элемента со страницы с помощью инструментов разработчика браузера). В этой статье расскажу про ещё один способ того, как усложнить жизнь тем, кто ворует чужой контент с помощью CSS свойства user-select и на этом пожалуй остановлюсь. Нет идеальной защиты. На крайней случай, можно всегда нанять секретаршу, которая всё перепечатает (если конечно нет нормального сисадмина, разбирающегося в том, как работают сайты, в штате).

CSS свойство user-select что оно умеет и для чего предназначено

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

Заданные значения этого свойства наследуются, поэтому, можно глобально запретить выделение (а значит и копирование) во всём документе, назначив ему значение none .

Сделать это можно так:

 body 

Для всех браузером: -ms , -moz , -webkit и основное свойство user-select .

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

CSS свойство user-select не отключает контекстное меню браузера, поэтому в два клика открывается инструментарий разработчика и значения свойства либо переводятся в all , либо просто удаляются.

Для того, чтобы усложнить жизнь тем, кто ворует чужой контент, можно прописать это свойство отдельным элементам страницы таким, как div , span , p , и другим контейнерам, куда помещается текст, который нужно защитить от копирования. Но опять же, — от секретаря с наманикюренными ногтями или от человека, чуть разбирающегося в HTML и CSS это не спасёт. К тому же, всегда можно сохранить всю страницу и открыть её на редактирование в MS Word.

Как разрешить копировать лишь часть контента

Для того, чтобы можно было хоть что-то скопировать, можно задать дополнительный CSS-класс, в котором отключить запрет на выделение:

 .enable 

Тогда, можно управлять тем, что поддаётся выделению (и копированию) и тем, что стандартными средствами выделить в браузере не получится (даже при отключенном в браузере JavaScript). Например,

Это то, что можно выделить
 
А вот это не утащишь! =)

Выводы

Таким образом с помощью CSS свойства user-select можно дополнительно усложнить жизнь тем, кто ворует контент и защитить сайт от копирования текста, но решения о том, как развидеть то, что уже показано на мониторе пользователя просто не существует. Если показали, — значит дали шанс использовать. А уж как поведёт себя пользователь с полученной информацией, предсказать невозможно.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉

Как отменить выделение текста?

Как частично отменить выделение ссылок?
Дело такое: есть ссылки картиночные и ссылки текстовые. Фон черный, как видно ниже. Нужно, чтобы.

Отменить выделение активной части карты
Здравствуйте. Решил научиться верстать странички, скачал учебник html. Хотел сделать так, чтобы при.

Как запретить выделение текста курсором мыши
Как запретить выделение текста курсором мыши? Нужно, чтобы при наведении курсора на меню курсор.

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

209 / 209 / 6
Регистрация: 23.10.2011
Сообщений: 971
можно как-то яваскриптом, но при его отключении, такая защита пропадает
Регистрация: 17.03.2012
Сообщений: 534
Записей в блоге: 2

Сообщение от Heleg

можно как-то яваскриптом, но при его отключении, такая защита пропадает
А через CSS?
209 / 209 / 6
Регистрация: 23.10.2011
Сообщений: 971
ха, а причем тут css.
Регистрация: 19.05.2014
Сообщений: 6

С помощью CSS можно менять цвет выделения(::selection), но убирать его можно только при помощи JS скриптов!

Регистрация: 08.04.2014
Сообщений: 54
попробуйте user-select:none для блока с текстом
Не мoдepaтор
340 / 315 / 94
Регистрация: 07.07.2012
Сообщений: 1,036
Записей в блоге: 7

Сообщение от abc_privet

Можно ли отменить обычное выделение текста для копирования?

Наложите поверх контента прозрачный слой на всю ширину и высоту, тогда будут выделять только слой, то есть — ничего. Таким образом простое копирование не будет работать.

Регистрация: 19.05.2014
Сообщений: 6
попробуйте user-select:none для блока с текстом

dimadyak прав, но не забудьте добавлять к атрибуту -moz-, -o-, -webkit-, взависимости от того какой у вас браузер!
-moz-user-select:none — пример для чайников)

2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
А по форуму поискать?
FAQ по JavaScript
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Отменить перенос указанного текста на следующую строчку
Как можно сделать, чтоб текст «name-file.txt» не переносился. Т.е. чтобы вместо: Переносилась.

Отменить смещение блоков при динамическом добавлении текста
Спасибо большое. Ещё вопрос есть один. Есть скрипт который при нажатии на кнопку выводит текст.

Как на cellclick сделать выделение только строки, а выделение столбца отменить
Здравствуйте, проблема такая, программа работает отлично, но я занимаюсь сопровождением ПО. И при.

Как отменить выделение?
Есть агентик который отрабатывает на выделенных документах во вью. Как снять это выделение после.