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

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

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

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

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

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

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

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

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

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

Я знаю, что этот вопрос уже был задан ( здесь ), но все ответы, которые я нашел, касались 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Создано 25.07.2014 20:30:49
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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 способа запретить выделение текста на сайте | Кабинет Веб-мастера

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

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