Управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.
Краткая информация
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
auto Для редактируемых элементов значение принимается contain . Если у родителя значение user-select установлено как all , то для элемента оно тоже будет all . Если у родителя значение user-select установлено как none , то для элемента оно тоже будет none . Во всех остальных случаях принимается значение text . none Пользователю запрещено выделять элемент. text Пользователь может выделить текст в элементе. all Позволяет выделить текст внутри элемента, включая дочерние элементы. contain Позволяет выделять текст, но только внутри границ элемента.
Пример
Этот текст нельзя выделить
Этот текст тоже можно выделить
Примечание
Internet Explorer и Edge поддерживают свойство -ms-user-select .
Chrome до версии 54, Opera до версии 41, Safari и Android поддерживают свойство -webkit-user-select .
Firefox поддерживает свойство -moz-user-select .
Значение contain поддерживается только в IE.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Как запретить браузеру выделять текст
- Разработка веб-сайтов
Если Вы веб-разработчик, то у вас наверняка возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.
Что же мы можем сделать? До сих пор думал немногое. Но прежде чем перейти к рассмотрению нового (лично для меня) методу, рассмотрим какие возможности борьбы с выделением текста предлагают нам браузеры.
Internet Explorer
Данный браузер дает нам две возможности:- Для элементов устанавливаем атрибут unselectable со значением on. Но тут есть один нюанс: текст блока с таким атрибутом нельзя выделить (то есть нельзя начать выделение с данного элемента, и клик по такому элементу не будет снимать выделение с текста, если такой выделен), но если он содержит другие элементы (к примеру «безобидные» SPAN, B и т.д.) то текст в них выделить можно. К тому же если выделение текста начато с блока без такого атрибута, то текст внутри блока с атрибутом unselectable так же будет выделен. В такой ситуации решение одно - ставить всем (!) элементам данный атрибут, что неудобно и не практично.
- Перехват события selectstart. Другими словами добавив элементу onselectstart=«return false» (к примеру к BODY) запрещает выделение текста внутри него. Опять же нюанс: если начать выделять текст за пределами такого блока, то текст внутри него выделяется без проблем.
FireFox (браузеры на движке gecko), Safari (браузеры на движке KHTML)
Данные браузеры имеют более совершенный механизм, запрещающий выделение текста в любом виде. Делается это через CSS свойство user-select со значение none, которое включили в CSS3. Но до того как это свойство утверждено, браузеры демократично сделали это собственной фишкой движка назвав свойство -moz-user-select и -khtml-user-select соответственно. Получается, чтобы запретить выделять текст внутри блока, достаточно написать:-moz-user-select: none; -khtml-user-select: none; user-select: none;
И дело в шляпе.
Другие браузеры
А вот что касается других браузеров, то у них таких механизмов замечено не было. Вообще никаких. Конечно же Opera впереди планеты всей, для нее запрет выделения текста равносильно самому злостному преступлению. Но есть, есть один могильничек:)Изучая вчера , наткнулся на интересные строки:
document.addEventListener("mousemove",function(e){ if(e.target.getAttribute("unselectable")=="on") e.target.ownerDocument.defaultView.getSelection().removeAllRanges(); },false);
Вспомним про атрибут unselectable у Internet Explorer"а, и становится ясным что в даном случае мы боремся с выделением текста. Развив идею, получилось некоторое кроссбраузерное решение:
function preventSelection(element){ var preventSelection = false; function addHandler(element, event, handler){ if (element.attachEvent) element.attachEvent("on" + event, handler); else if (element.addEventListener) element.addEventListener(event, handler, false); } function removeSelection(){ if (window.getSelection) { window.getSelection().removeAllRanges(); } else if (document.selection && document.selection.clear) document.selection.clear(); } function killCtrlA(event){ var event = event || window.event; var sender = event.target || event.srcElement; if (sender.tagName.match(/INPUT|TEXTAREA/i)) return; var key = event.keyCode || event.which; if (event.ctrlKey && key == "A".charCodeAt(0)) // "A".charCodeAt(0) можно заменить на 65 { removeSelection(); if (event.preventDefault) event.preventDefault(); else event.returnValue = false; } } // не даем выделять текст мышкой addHandler(element, "mousemove", function(){ if(preventSelection) removeSelection(); }); addHandler(element, "mousedown", function(event){ var event = event || window.event; var sender = event.target || event.srcElement; preventSelection = !sender.tagName.match(/INPUT|TEXTAREA/i); }); // борем dblclick // если вешать функцию не на событие dblclick, можно избежать // временное выделение текста в некоторых браузерах addHandler(element, "mouseup", function(){ if (preventSelection) removeSelection(); preventSelection = false; }); // борем ctrl+A // скорей всего это и не надо, к тому же есть подозрение // что в случае все же такой необходимости функцию нужно // вешать один раз и на document, а не на элемент addHandler(element, "keydown", killCtrlA); addHandler(element, "keyup", killCtrlA); }
Вызвав данную функцию, например:
вы запретите выделение во всем документе, кроме элементов INPUT и TEXTAREA.
Комментарии:
- Opera не дает обрабатывать событие dblclick, так что в этом браузере все равно возможно выделить текст двойным кликом.
- Ctrl+A:
- В Opera длительное (2-3 секунды) удержание данной комбинации вызывает выделение текста до ее отпускания. Причем если первым отжать клавишу А а потом Ctrl, то выделение пропадает. Иначе остается.
- Safari не обрабатывает keydown для клавиш при зажатом Ctrl. Потому выделение текста пропадает только после отпускания клавиш. Причем для этого браузера характерно поведение Opera, в плане порядка отпускания клавиш (если первым отжать Ctrl, то выделение останется).
- Выделении текста двойным кликом:
- Safari & FireFox выделяют слово, и сразу снимают выделение. То есть присутствует эффект кратковременного выделения текста.
- Opera не дает запретить поведение по умолчанию. Она выделяет слово и вызывает контекстное меню.
Тестировалось на FireFox 2.0.11, IE 6.0, Opera 9.24, Safari 3.0.3 (Win).
Конечно решение не идеальное, и требует JavaScript (с другой стороны это и нужно в веб-приложениях, которые и так используют JS). Но это лучше чем ничего, и довольно кроссбраузерно (конечно может потребоваться дополнительный код для некоторых браузеров и их версий).
Буду рад замечаниям, комментариям, дополнениям.
UPDATE Ввиду того, что многие к концу статьи видимо забывают начало, или не внимательно читают, повторяю первый суть первого абзаца. В данной статье я не решал задачу полного запрета выделения текста с целью его защиты от копирования, а имел ввиду запрет на выделение всевозможных подписей, надписей и т.п. там где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается обычных информационных сайтов.
Сегодня я хочу рассказать Вам как изменить цвет выделения текста на сайте только с помощью CSS.
Естественно это не очень Важный момент в дизайне Вашего сайта. Но если Вы измените цвет выделения это ещё больше подчеркнёт уникальность Вашего дизайна. Тем более если стандартный синий цвет выделения текста ну никак не хочет сочетаться с другими цветами Вашего шаблона.
За урок огромное спасибо сайту css-tricks.com .
В общем, друзья, давайте начинать.
Друзья, делается это очень просто, нужно только прописать несколько не сложных строк в стилях CSS. Здесь мы рассмотрим как сделать один цвет выделения для всего текста на сайте, а так же сделаем отдельные цвета для того текста который мы захотим, другими словами для каждого текста отдельный цвет.
Цвет выделения для всего текста на сайте
По умолчанию давайте выберем серый цвет #ccc. И для того чтобы цвет выделения изменился, нужно добавить вот эти строки в стили:
::selection {background: #ccc;} ::-moz-selection {background: #ccc;} ::-webkit-selection {background: #ccc; color:#fff;}
Всё. Теперь на нашем сайте цвет выделения стал серым. Но и это ещё не всё.
Цвет текста
Например мне захотелось чтобы именно сами буквы меняли цвет. Для этого просто нужно задать свойство color: с желаемым цветом. Таким образом вот как будет выглядеть код:
::selection {background: #ccc; color:#fff;} ::-moz-selection {background: #ccc; color:#fff;} ::-webkit-selection {background: #ccc; color:#fff;}
Вот теперь при выделении цвет буквы будет белого цвета.
Цвет выделения для отдельного текста на сайте
Например нам хочется, чтобы сверху текст выделялся зелёным, посередине красным, а снизу голубым. Для этого просто нужно к тегу
Присвоить соответствующий класс, например для красного выделения класс будет red и так далее.
Таким образом вот как будет выглядеть код CSS:
P.red::selection {background: #FFB7B7;} p.red::-moz-selection {background: #FFB7B7;} p.red::-webkit-selection {background: #FFB7B7;} p.blue::selection {background: #67cfff;} p.blue::-moz-selection {background: #67cfff;} p.blue::-webkit-selection {background: #67cfff;} p.green::selection {background: #78e780;} p.green::-moz-selection {background: #78e780;} p.green::-webkit-selection {background: #78e780;}
Как видите, что для каждого цвета мы задали свой класс. Теперь давайте посмотрим как это будет выглядеть в HTML:
Пример зелёного цвета при выделении текста
Пример красного цвета при выделении текста
Пример голубого цвета при выделении текста
Как видите, здесь нет ничего сложного. Просто к каждому тегу
Мы присвоили класс с соответствующим цветом.
Вот и всё, дорогие друзья. Теперь мы научились изменять цвет при выделении текста. Если у Вас возникнут какие либо вопросы обращайтесь в комментариях. До скорых встреч.
Бывают ситуации, когда необходимо запретить выделение текста или сделать на сайте кнопку по которой будут кликать много раз подряд (например, стрелка слайдера). И случается такая неприятная ситуация, когда после 2 или 3 клика какая то область выделяется синим цветом. Это очень раздражает и не дает спокойно дальше работать. С этим можно и нужно бороться.
Сегодня мы рассмотрим 3 способа запретить выделение текста на сайте с помощью css, javascript и передачей фокуса.
Правила css
Самый простой и действенный (на мой взгляд) способ с помощью css. Для браузеров, которые не поддерживают это свойство написаны префиксные варианты. Вешать нужно непосредственно на сам элемент (например, кнопку):
Webkit-touch-callout: none ; -webkit-user-select: none ; -khtml-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ;
Запрет JavaScript
Этот способ подразумевает написание и исполнение скрипта. По статистике в 95% браузерах JavaScript будет работать. Поэтому можно считать этот способ достаточно безопасным и жизнеспособным:
$("body" ) .on ("mousedown" , "ТУТ УКАЗЫВАЕМ ID или CLASS БЛОКА, НА КОТОРЫЙ ВЕШАЕМ - .class, #id" , function (e) { e.preventDefault () ; } ) ;Передача фокуса
Способ очень не очевидный, но тоже работает. Суть заключается в том, что при клике на элемент, фокус после клика передается на другой элемент. Кому и зачем это может понадобиться? Ситуации бывают разные, может и пригодится:
$("body" ) .on ("mouseup" , "ТУТ УКАЗЫВАЕМ ID или КЛАСС БЛОКА, НА КОТОРЫЙ ВЕШАЕМ - .class, #id" , function () { $("ТУТ УКАЗЫВАЕМ ID или CLASS ЭЛЕМЕНТА, НА КОТОРЫЙ ПЕРЕДАЕМ ФОКУС" ) .trigger ("focus" ) ; } ) ;Вот и все! Успехов с выделениями!
Вероятно, вы обращали внимание, что цвет выделения на некоторых веб-сайтах отличается от цвета выделения по умолчанию и подходит к другим цветам, используемым на сайте. Этого можно добиться с помощью CSS, и задать эти цвета так же, как и другие цвета на веб-сайте. Таким образом можно создать сайт, цветовая схема которого будет использоваться абсолютно везде на этом сайте, и для этого нужно небольшое количество несложного кода CSS.
Поддержка браузерами
Этот способ работает в браузерах Firefox, Chrome, Safari и Internet Explorer, начиная от 9-ой версии, но не работает в современных версиях браузеров Chrome и Safari для iOS, Opera Mini и UC Browser для Android. Воспринимайте этот эффект как декоративное дополнение. Те пользователи, которые смогут его увидеть, восхитятся безупречным стилем Вашего сайта, а те, кто не сможет - не почувствуют себя обделенными.
Пример использования
Вот скриншот того, как может выглядеть уникальный цвет выделения для пользователей браузеров, поддерживающих этот псевдоэлемент:
Можете сами опробовать, как это работает, открыв страницу с исходником этого урока в подходящем браузере и выделив любой текст в уроке. Выделенный текст будет белым на малиновом фоне.
Код CSS
Чтобы создать уникальный цвет выделения текста, нужно добавить следующий код в таблицу стилей:
::-moz-selection { background-color : #BA9EB0 ; color : #ffffff ; } ::selection { background-color : #BA9EB0 ; color : #ffffff ; }
Этот код создаст белый цвет текста на сиреневом фоне при выделении. Вы можете выбрать любые другие цвета, подходящие к цветовой схеме Вашего сайта.
Свойство цвета фона задает цвет фона выделенного текста, а цвет - цвет шрифта.
Не забывайте поменять цвета для обоих псевдоэлементов. Псевдоэлемент -moz-selection работает в браузере Firefox, а псевдоэлемент selection (выделение) - во всех остальных поддерживающих это свойство браузерах.
Выбирайте сочетания цветов с хорошей контрастностью и не забудьте проверить, насколько выделенный текст остается читабельным. Цель в подборе подходящих цветов, а не в создании трудностей при чтении.
Вот и все, что нужно сделать, чтобы на Вашем сайте появился сочетающийся с общей цветовой схемой цвет выделения текста. Просто добавьте код CSS, приведенный выше, в файл стилей, выберете подходящие цвета и замените на них цвета в этом отрывке кода, и у Вас на сайте будет уникальный цвет выделения текста.
Подбор цветов
Для подбора цветов можно использовать, например, сайт Colorpicker.com или добавление к браузеру Colorzilla . Ну и, конечно, можно выбрать цвета в редактирующих изображения программах, например, в Photoshop. Во всех этих источниках будут указаны цвета в шестнадцатеричной записи, и Вы можете просто скопировать их и вставить в код выше.
Закрытие ИП
