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

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

  • автор:

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

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

 href="#" alt="http://ru.hexlet.io">Перейти по ссылке 
a:link, a:visited  text-decoration: none; > a:hover, a:active text-decoration: underline; > 

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

Вариант CSS 1

Следующий код CSS охватывает отключение выделения текста во всех основных браузерах:

Выбираемый текст.

Не выбираемый текст.

.demipo_sakiles <
-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;
/* Версия без префикса, в настоящее время не поддерживается ни одним браузером */
>

Почти все браузеры поддерживаются пользователем, кроме Internet Explorer 9 и более ранних версий. Однако, поскольку это не стандартная функция, могут возникнуть проблемы при реализации кода в разных браузерах

Вариант CSS №2

Альтернативный подход CSS с использованием контейнера div будет использовать следующий код:

это описание не скопировать

.atudsam-igedsamib <
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; user-select: none;
>

Поскольку это свойство не следует, так как тег придется применять для каждого элемента в контейнере div

Опция Javascript

Опция JavaScript должна быть рассмотрена, когда вышеупомянутые опции CSS не работают. Следующий код может быть использован для потомков элемента.

function makeUnselectable(node) <
if (node.nodeType == 1) <
node.setAttribute(«unselectable», «on»);
>
var child = node.firstChild; while (child) <
makeUnselectable(child); child = child.nextSibling;
>
>
makeUnselectable(document.getElementById(«foo»));

Более простой вариант JavaScript, который можно рассмотреть:

onselectstart=»return false;»

Важно помнить, что ни один из этих вариантов не охватывает все возможности. Кроме того, возможность выбора отключена только внутри элементов, покрытых кодом CSS или JavaScript.

Другие элементы до и после целевого текста могут быть выделены. Этот подход не идеален для отключения выделения текста и выделения всей страницы.

Помните, что нет быстрого и простого способа реализовать эту функцию, особенно с помощью CSS, поэтому Javascript может быть наиболее приемлемым вариантом.

Средствами JavaScript (jQuery)

Суть скрипта — добавить все тот же набор CSS-правил для всех браузеров, создать атрибут unselectable и вернуть false при возникновении события onselectstart в IE.

Завернем наш скрипт в плагин, например jquery.disableSelection.js

jQuery.fn.extend( <
disableSelection : function() <
this.each(function() <
this.onselectstart = function() < return false; >;
this.unselectable = «on»;

jQuery(this).css( <
‘-moz-user-select’: ‘none’,
‘-o-user-select’: ‘none’,
‘-khtml-user-select’: ‘none’,
‘-webkit-user-select’: ‘none’,
‘-ms-user-select’: ‘none’,
‘user-select’: ‘none’
>);

На веб-странице вызываем его так:

Когда нужно это подключать:

Многие веб-мастера предпочитают отключать функцию выделения и выделения текста, чтобы предотвратить несанкционированное копирование контента со своего веб-сайта. Однако нет надежного способа полностью отключить выделение текста.

Обход запрета выделения текста на странице

На некоторых сайтах можно встретить ситуацию, когда выделение текста прямо запрещено – при попытке выделить стандартным способом с зажатой левой кнопкой, ничего не происходит. Делают это, обычно, для того, чтобы напакостить любителям копипаста. В других же случаях это просто необходимо (формы Drag&Drop, выделение текста кнопок и пр.)

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

-moz-user-select: none;
-webkit-user-select: none;

Если же на странице, где вам нужно выделить текст, используется данный метод, то для обхода запрета выделения нужно через «Инструменты разработчика» (Developer Tools) добавить следующее свойство (либо же найти запрещающее свойство и отключить его):

-moz-user-select: text;
-webkit-user-select: text;

Выделение текста

Используйте select-all , чтобы автоматически выделять весь текст в элементе, когда пользователь щелкает мышью.

Щелкните в любом месте этого текста, чтобы выделить все

div class="select-all . "> Щелкните в любом месте этого текста, чтобы выделить все div>

Авто

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

Этот текст можно выбрать

div class="select-auto . "> Этот текст можно выбрать div>

Кастомизация

Варианты

По умолчанию, только responsive варианты создаются для утилит user-select. Вы можете контролировать, какие варианты создаются для утилит user-select для изменения свойства userSelect в разделе variants Вашего файла конфигурации tailwind.config.js . Например, эта конфигурация также будет генерировать варианты hover и focus :

 // tailwind.config.js module.exports =  variants:  extend:  // . + userSelect: [' hover ', ' focus '],  > > >

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения user-select , Вы можете полностью отключить их, установив для userSelect свойство значение false в разделе corePlugins Вашего файла конфигурации:

 // tailwind.config.js module.exports =  corePlugins:  // . + userSelect: false,  > >

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

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