Css выделение текста: Меняем цвет выделения текста с помощью CSS. / Habr – CSS стили для выделенного курсором текста

Задаем уникальный цвет выделения текста с использованием CSS

Вероятно, вы обращали внимание, что цвет выделения на некоторых веб-сайтах отличается от цвета выделения по умолчанию и подходит к другим цветам, используемым на сайте. Этого можно добиться с помощью 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. Во всех этих источниках будут указаны цвета в шестнадцатеричной записи, и Вы можете просто скопировать их и вставить в код выше.

Автор урока Marie Mosley

Смотрите также:

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

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

От автора: вы когда-нибудь сталкивались с такой ситуацией, когда текст размещают в полях формы textarea или input для упрощения выделения всего блока? У таких полей формы есть свои границы выделения, т.е. можно кликнуть внутри этой границы и выделить весь текст поля. Есть CSS свойство, позволяющее делать то же самое без необходимости задействовать несемантические поля формы.

Свойство называется user-select, и работает оно так:

.force-select-all { user-select: all; }

.force-select-all {

  user-select: all;

}

Autoprefixer добавит нужные префиксы, но если делать все руками, тогда запись должна быть такой:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.force-select-all { -webkit-user-select: all; /* Для браузеров на движке Blink и Firefox */ user-select: all; /* Когда-нибудь будет хватать только этой строки */ }

.force-select-all {

  -webkit-user-select: all; /* Для браузеров на движке Blink и Firefox */

  user-select: all; /* Когда-нибудь будет хватать только этой строки */

}

Вам нужен пример?

Я нашел самый распространенный пример использования данного свойства. Ситуация из разряда «у нас есть сгенерированный на сервере код для вставки на наш сайт». Представьте код вставки Youtube или Vimeo видео:

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

Подходит для сайтов наподобие моего старого HTML-Ipsum, который уже давно нужно обновить.

Демо

Разберем другой пример. Шпаргалка с небольшими кусками кода, которые необходимо скопировать в буфер:

По поводу префиксов

На самом деле, Autoprefixer преобразует запись свойства к следующему виду:

.force-select-all { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; }

.force-select-all {

  -webkit-user-select: all;

  -moz-user-select: all;

  -ms-user-select: all;

  user-select: all;

}

Что можно понять:

глупо использовать только префикс –webkit- для Firefox, даже если браузер с ним работает;

браузер Edge не поддерживает значение all, однако он поддерживает значение none с префиксом.

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

Тут нам поможет значение contain. Значение заставляет текст вести себя так, будто бы он расположен внутри поля формы:

.select-text-like-you-would-within-a-textarea { /* Пока нигде не поддерживается */ user-select: contain; }

.select-text-like-you-would-within-a-textarea {

  /* Пока нигде не поддерживается */

  user-select: contain;

}

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

К сожалению, данное значение пока нигде не поддерживается. В IE/Edge есть своя версия данного значения:

.ie-version-of-contain { -ms-user-select: element; }

.ie-version-of-contain {

  -ms-user-select: element;

}

Теперь мы знаем про три значения: none, all и contain. Также есть значение text, текст с которым выделяется по-обычному. Если вам понадобится сбросить значение, для этого есть значение auto. Данное значение возвращает элемент к нормальному состоянию (т.е. для тега p установится значение text, для textarea — contain).

Стилизация выделенного текста

Выделенный текст можно стилизовать:

::-moz-selection { background: yellow; } ::selection { background: yellow; }

::-moz-selection { background: yellow; }

::selection { background: yellow; }

Но… я бы не рекомендовал использовать эти два селектора в паре. Автоматически выделенный текст уже ведет себя немного странно, а вместе с совершенно другими стилями получается полная неразбериха. Пользователь может не понять, что творится на экране. На крайний случай можно задать ::selection на весь сайт, а не только для отдельных областей.

Классический способ через JavaScript

Вам может быть очень важна поддержка в Edge. Если вам кровь из носу нужно реализовать автоматическое выделение текста, можно сделать это через поле формы и JS. Самый базовый пример:

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

Псевдоэлементы

Не знаю, плохо это или хорошо, но с помощью user-select: text; можно выделять текст в псевдоэлементах типа ::before и ::after, которые на данный момент не обладают таким свойством ни в одном браузере. С одной стороны хорошо, что мы не можем выделить текст псевдоэлемента, так как он не разрабатывался для считывания технологиями для людей с ограниченными возможностями (псевдоэлементы не контент). С другой стороны странно видеть текст на экране и не иметь возможности его выделить. Так что неудивительно, что браузеры находят обходные пути.

Мобильные устройства

На iOS есть еще один способ:

.prevent-touch-callout { -webkit-touch-callout: none; }

.prevent-touch-callout {

  -webkit-touch-callout: none;

}

Не совсем выделение текста, но если предотвратить выделение текста, вы отключите любые взаимодействия с элементом. С MDN: «На iPhone OS при нажатии и удержании пальца на элементе в браузере Safari появляется всплывающая выноска с информацией. Данное свойство позволяет отключить эту выноску.»

Принудительное копирование?

Можно ли включить принудительное копирование текста в буфер обмена? Можно. Раньше был способ на Flash. Однако все мы знаем, что Flash уже мертв. Chrome объявил об очередном гвозде в крышке гроба данной технологии. В IE 10 появилась поддержка execCommand, и, кажется, эта технология будет и в других браузерах. Вытянул демо из статьи Мэтта Гонта с Google:

Демо работает в браузерах на движке Blink, Firefox и Edge… круто.

Редакция: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Принудительное выделение блока с текстом

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

CSS разрешить только выделение текста на веб-странице?

Есть ли легкий фрагмент CSS или Javascript, который позволит мне только сделать выбор / выделение вещей на странице доступным только для текста? Это всегда раздражало меня, когда вы пытаетесь выделить текст, и вы в конечном итоге выделяете divs и изображения и вещи.

Есть ли способ ONLY выделить текст? Это будет включать абзац, якоря, текст внутри изображений divs & и все теги заголовка.

Спасибо! ~ Джексон

Я загружаю результаты всех, кто отвечает на это, в настоящее время я запускаю код @Nick Рэдфорда, который он ETAd.

Вот он, и он ближе, все еще много выбора, кроме текста, продолжающегося с помощью ctrl+a: http://designsweeter.com/

javascript css selection pseudo-element

Поделиться Источник alt     22 июня 2011 в 00:45

2 Ответа



16

html{ 
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none; 
}
p,a,h2,h3,h4,h5,h5,h6,div,br,li,td,article{
    -o-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

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

html{-moz-user-select:none;-o-user-select:none;-webkit-user-select:none;user-select:none}p,a,h2,h3,h4,h5,h5,h6,div,br,li,td,article{-moz-user-select:text;-o-user-select:text;-webkit-user-select:text;user-select:text}

Поделиться alt     22 июня 2011 в 01:16



6

это может сработать:

img, div { 
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none; 
}

Поделиться Joe     22 июня 2011 в 00:48



Как избежать выделения текста на веб-странице с помощью css?

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


выделение текста в CSS?

Я пытаюсь изменить выделение текста на моей странице HTML. Я хочу изменить значение hex в css для выделенного текста всякий раз, когда я выбираю какой-либо текст из para. Как я могу сделать это в...


Отключить частичное выделение текста в веб-PhoneGap приложение (android)

Я хочу отключить эффект выделения текста (всплывающий инструмент для copy/paste/select-all на Andorid)на некоторых элементах DOM веб-приложения phonegap. В основном, я хочу включить выделение текста...


CSS или Javascript, чтобы отключить выделение текста выделение от CTRL + в

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


Как эта веб-страница отключила выделение текста?

Привет я нашел эту страницу сегодня: http://www.snopes.com/inboxer/hoaxes/sister.asp Я не мог понять, как он отключает выделение текста. Это не обычный метод CSS или javascript. Кто-нибудь знает,...


Отключить выделение текста, нажав кнопку Пуск

Я знаю, что могу отключить выделение текста для div, но это не то, что я хочу. У меня есть этот jquery color picker , и, как вы можете видеть на веб-странице в плоском примере, если вы выбираете...


Как разрешить выделение текста в TideSDK

Я разрабатываю приложение для использования с TideSDK. Очевидно, что в Chrome пользователь может выбрать любой текст html, который он видит. Однако в TideSDK, похоже, что выделение текста отключено...


Как отключить выделение текста с помощью CSS или JavaScript?

Возможный Дубликат : Правило CSS чтобы отключить выделение текста выделение Я делаю галерею HTML/CSS/jQuery, с несколькими страницами. У меня действительно есть кнопка next,которая представляет...


Замена текста на веб-странице

Я хочу взять ввод текста пользователем, который заменит написанный текст на веб-странице. просто подумайте, что у меня есть имя в html, я сделал форму, в которой набираю его имя и нажимаю (хорошо)...


Как отключить выделение текста через jQuery?

Я знаю, что этот вопрос уже был задан ( здесь ), но все ответы, которые я нашел, касались css selector: выбор (который еще не слишком широко поддерживается браузерами). Итак, как я могу отключить...


Меняем цвет фона выделенного текста с помощью CSS / Dimox.name

Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня — это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет по вашему усмотрению.

На данный момент ::selection поддерживают следующие браузеры:

  • Safari;
  • Google Chrome;
  • FireFox;
  • Opera 9.5 (начиная с билда 9770).

Safari несколько по-другому отображает результат в сравнении с FireFox и Opera (последние два браузера обрабатывают этот псевдоэлемент идентично).

Вот так это выглядит в CSS:


::selection {
	background: #FFB7B7; /* Safari, Chrome, Opera */
}
::-moz-selection {
	background: #FFB7B7; /* FireFox */
}

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


p.red::selection {background: #FFB7B7;}
p.red::-moz-selection {background: #FFB7B7;}

p.blue::selection {background: #A8D1FF;}
p.blue::-moz-selection {background: #A8D1FF;}

p.yellow::selection {background: #FFF2A8;}
p.yellow::-moz-selection {background: #FFF2A8;}

Примеры

  • Пример с разными фонами выделенных абзацев.
  • Селектор ::selection можно использовать и для того, чтобы спрятать секретный текст 🙂 …
  • … или даже картинку.
  • Пример прямо в этом посте. Повыделяйте текст этого поста в одном из браузеров, поддерживающих данный селектор.

Практичность применения данной штуки, конечно, под вопросом. Тем не менее она показывает, что разработчики вышеуказанных браузеров стремятся к полноценной поддержке стандартов, постепенно внедряя подобные этой функции.

VIA

P.S. Во время тестирования селектора на этом посте, заметил, что он не работает в Safari и FireFox, если его применить к тегу списка <ul>, а работает только тогда, когда класс прописан непосредственно к элементу списка <li>.

* * *

Большой выбор только качественно компьютерной и бытовой техники предлагает официально зарегистрированный интернет магазин Донецк «Домовой». На весь ассортимент продукции имеются сертификаты, и предоставляется гарантийное обслуживание в сервисных центрах.

Как разрешить или запретить выделять текст на CSS.

Вы здесь: Главная - CSS - CSS Основы - Как разрешить или запретить выделять текст на CSS.

Как разрешить или запретить выделять текст на CSS.

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

Данное свойство позволяет разрешить или запретить выделение текста на странице.

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

Теперь поговорим о значениях.

-moz-user-select: all;

-moz-user-select: text;

-moz-user-select: none;

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

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

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

Однако, как вы могли заметить, все это касается браузера Mozilla Firefox.

Чтобы это работало в браузерах, использующих движок webkit, нужно прописать префикс -webkit-.

-webkit-user-select: auto;

-webkit-user-select: none;

-webkit-user-select: text;

text - можно выделять текст в элементе.

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

auto - можно выделять элемент.

Вот такое свойство, которое, иногда, находит применение и знать его нужно.

Спасибо за внимание и до скорого!

  • Как разрешить или запретить выделять текст на CSS. Создано 25.07.2014 20:30:49
  • Как разрешить или запретить выделять текст на CSS. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

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

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

 

 


Псевдоэлемент выделения определяет, как выглядит выделенный элемент. Как и псевдоэлемент посещения,  этот псевдоэлемент может влиять далеко не на все свойства, а только на такие как: цвет, фон или отдельно цвет фона и фоновое изображение и тень текста. Например, такая запись изменит цвет фона всех выбранных элементов на красный:

::selection { background: red; }

Обратите внимание, старым версиям браузера Firefox требовалась запись этого псевдоэлемента с приставкой производителя:

::moz-selection { background: red; }
::selection { background: red; }

И это объявление должно было быть записано отдельно от объявления без приставки производителя, а при объединении записей псевдоэлементы конфликтовали друг с другом и отменяли эффект. Хотя современным версиям браузера Firefox уже не требуется такая запись, ее все еще удобно использовать для обходных путей, как показано в примере ниже.

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

h2::selection { background: red; }

Псевдоэлемент выделения был удален из спецификации CSS из-за недостаточной проработанности и был добавлен назад в спецификации псевдоэлементов CSS4. Хотя все это время все браузеры, кроме Safari для IOS и Opera Mini, продолжали его поддерживать.

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

h2::moz-selection { background: black; color: white; }
h2::selection { background: black; color: white; }

Интересный вариант был предложен Viljami Salminen, Вы можете увидеть его ниже: цвет выделенного текста инвертируется, цвет фона выделения делается прозрачным и обводится внешний контур текста. Так как только браузеры на движке Webkit поддерживают свойство обведения текста, задаем сначала свойства для браузера Firefox:

h2::-moz-selection {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
         -1px 1px 0 #000, 1px 1px 0 #000;
  background: transparent;
}

После этого задаем особое свойство для браузеров Chrome, Safari и Opera:

h2::selection {
   text-shadow: none;
    -webkit-text-stroke: 1px #000;
  background: transparent;
}

И вот полученный результат. Выделите текст ниже, чтобы увидеть особый эффект выделения:

К сожалению, псевдоэлемент выделения работает в современных версиях браузера Internet Explorer, начиная от 9 версии, но при этом в нем не поддерживается свойство обведение текста, поэтому там выделенный текст станет полностью невидимым. Для решения этой проблемы нужен обходной путь, или можно использовать только обведение с помощью тени для всех браузеров.

Псевдоэлемент выделения можно объединить с псевдоклассом неактивного состояния окна, чтобы задавать, как выделенное содержимое должно выглядеть, когда окно браузера теряет фокус:

::selection:window-inactive {
  background:rgba(0,0,0,0.3);
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

3 способа запретить выделение текста на сайте | Кабинет Веб-мастера

3 способа запретить выделение текста на сайте

Бывают ситуации, когда необходимо запретить выделение текста или сделать на сайте кнопку по которой будут кликать много раз подряд (например, стрелка слайдера). И случается такая неприятная ситуация, когда после 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");
});

Вот и все! Успехов с выделениями!

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

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