Поменять цвет выделения css

Как изменить цвет по умолчанию выделенного текста с помощью CSS

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

Если вам не нравится синий цвет, или по какой-либо другой причине (например, это может быть связано с дизайном вашей веб-страницы) вы хотите изменить цвет выделения, CSS3 дает эту возможность!

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

Можно изменить цвет/фоновый цвет определенных элементов или всей веб-страницы.

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

Для максимальной совместимости браузера используйте расширение -moz- для поддержки в Firefox ( ::-moz-selection ).

Как изменить цвет шрифта при выделении текста

Чтобы изменить цвет элемента, необходимо добавить стиль к элементу с помощью псевдоэлемента ::selection . Можно изменить только цвет шрифта, а также цвет шрифта вместе с фоном.

Пример

html> html> head> title>Заголовок документа title> style> .green::-moz-selection< color: #8ebf42; > .green::selection< color: #8ebf42; background-color: initial; > .bg-green::-moz-selection< background-color: #8ebf42; > .bg-green::selection< background-color: #8ebf42; > .bg-transparent::-moz-selection< color: #8ebf42; background-color: transparent; > .bg-transparent::selection< color: #8ebf42; background-color: transparent; > .white-green::-moz-selection< color: #fff; background-color: #8ebf42; > .white-green::selection< color: #fff; background-color: #8ebf42; > style> head> body> p class="green">Выберите этот текст и увидите зеленый цвет шрифта и фон по умолчанию. p> p class="bg-green">Выберите этот текст и увидите цвет шрифта по умолчанию и зеленый фон. p> p class="bg-transparent">Выберите этот текст и увидите зеленый цвет шрифта без фонового цвета. p> p class="white-green">Выберите этот текст и увидите белый цвет шрифта и зеленый фоновый цвет. p> body> html>

В этом примере фоновый цвет по умолчанию — это цвет данного сайта.

Как изменить фоновый цвет при выделении текста

Здесь нужно применить то же самое, только для фонового цвета. Просто добавьте стиль к элементу с помощью ::selection и установите выбранный вами цвет для свойства background-color .

Пример

html> html> head> title>Заголовок документа title> style> .green::-moz-selection< background-color: #8ebf42; > .green::selection< background-color: #8ebf42; > .yellow::-moz-selection< background-color: #ffcc00; > .yellow::selection< background-color: #ffcc00; > style> head> body> p>Текст с фоновым цветом по умолчанию. p> p class="green">Выберите этот текст и увидите зеленый фон. p> p class="yellow">Выберите этот текст и увидите желтый фон. p> body> html>

В случае, если не хотите фоновый цвет при выделении текста, установите свойство background-color со значением «transparent».

Как изменить цвет тени при выборе текста

Используйте дальше псевдоэлемент ::selection для добавления, удаления или изменения вида текстовой тени при выделении.

Вам необходимо только установить свойство text-shadow для псевдоэлемента ::selection .

Пример

html> html> head> title>Заголовок документа title> style> /* before selection */ .shadow2< text-shadow: 1px 1px 1px; > .shadow3< text-shadow: 1px 2px 4px #000; > .shadow4< text-shadow: 1px 2px 4px; > /* after selection */ .shadow1::-moz-selection< text-shadow: 1px 1px 1px; background-color: transparent; > .shadow1::selection< text-shadow: 1px 1px 1px; background-color: transparent; > #shadow2::-moz-selection< text-shadow: none; background: #fffae6; > .shadow2::selection< text-shadow: none; background: #fffae6; > .shadow3::-moz-selection< text-shadow: 1px 1px 2px #222; > .shadow3::selection< text-shadow: 1px 1px 2px #222; > .shadow4::-moz-selection< text-shadow: 1px 2px 4px #208A28; background-color: transparent; color: #208A28; > .shadow4::selection< text-shadow: 1px 2px 4px #208A28; background-color: transparent; color: #208A28; > style> head> body> p class="shadow1">Выделите текст и увидите его тень. p> p class="shadow2">Выделите текст, чтобы удалить его тень. p> p class="shadow3">Выделите текст, чтобы он стал яснее. p> p class="shadow4">Выделите текст, чтобы изменить цвет его тени. p> body> html>

Как изменить цвет полей Textarea и Input при выборе текста

Пример

html> html> head> title>Заголовок документа title> style> input::-moz-selection< color: #1c87c9; background-color: #eee; > input::selection< color: #1c87c9; background-color: #eee; > textarea::-moz-selection< color: white; background-color: #8ebf42; > textarea::selection< color: white; background-color: #8ebf42; > style> head> body> p>Элемент input p> form>input type="text" value="Выделите этот input текст" /> form> p>Элемент textarea p> textarea rows="5" cols="25">Выделите этот textarea текст textarea> body> html>

Как изменить цвет выбранного изображения

Вы можете изменить цвет выделенного изображения с помощью псевдоэлемента ::selection . Смотрите пример сами:

Пример

html> html> head> title>Заголовок документа title> style> img < padding: 10px; > #img2::-moz-selection< background-color: #d9d9d9; > #img2::selection< background-color: #d9d9d9; > style> head> body> p>Здесь второе изображение при выделении становится серым. p> p>Выделите обе изображения, чтобы увидеть разницу. p> img id="img1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"> img id="img2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"> body> html>

Представьте, что у вас есть 4 параграфа, и вы хотите применить разные цвета для каждого из них по отдельности.

В таком случае необходимо изменить цвет выделения для разных параграфов или разных разделов страницы.

Пример

html> html> head> title>Заголовок документа title> style> p.green::selection < background: #8ebf42; > p.green::-moz-selection < background: #8ebf42; > p.blue::selection < background: #1c87c9; > p.blue::-moz-selection < background: #1c87c9; > p.yellow::selection < background: #ffcc00; > p.yellow::-moz-selection < background: #ffcc00; > p.red::selection < background: #ff6666; > p.red::-moz-selection < background: #ff6666; > style> head> body> p class="green">Выберите текст, и он выделится зеленым цветом. p> p class="blue">Выберите текст, и он выделится синим цветом. p> p class="yellow">Выберите текст, и он выделится желтым цветом. p> p class="red">Выберите текст, и он выделится красным цветом. p> body> html>

Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.

Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.

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

Пример

html> html> head> title>Заголовок документа title> style> ::-moz-selection< color: #fff; background-color: #8ebf42; > ::selection< color: #fff; background-color: #8ebf42; style> head> body> h3>Выберите несколько элементов на странице и увидите белый цвет выделения, а фоновый цвет установлен в зеленый для всей страницы. h3> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.. I p> img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"> body> html>

::selection поддерживается многими браузерами. Проблема совместимости с Firefox решается при помощи добавления префикса -moz- перед селектором. В случае планшетов и мобильных устройств данный селектор не поддерживается в iOS Safari и Opera Mini.

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

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

Источник

Как изменить цвет и фон выделения на сайте в html5

Изменить цвет и фон выделения текста со стандартного синего (а еще хуже оранжевого, в убунте например, 🙂 ) можно довольно просто с помощью псевдоселектора ::selection (поддерживается IE9+, Opera, Chrome и Safari).

Стоит добавить, что только несколько css свойств могут быть применены к ::selection ,

это color , background , cursor и outline .

Давайте попробуем! Нам понадобится всего несколько строк css:

HTML

 
Текст с дефолтным(системным) цветом и фоном выделения
 
Текст с заданными нами цветом и фоном выделения
 

CSS

h3.custom_selection::-moz-selection < background: rgba(255,251,102, 0.8); color: rgb(19,188,188); >h3.custom_selection::-webkit-selection < background: rgba(255,251,102, 0.8); color: rgb(19,188,188); >h3.custom_selection::selection

Теперь можно попробовать, что из этого получисось:

A так можно измениить цвет выделения всего контента страницы?

Для этого используем body (хотя – худший по скорости вариант, для отрисовки в браузере.

Если есть предложения, по-лучше?

CSS

body *::-moz-selection < background: rgba(255,251,102, 0.8); color: rgb(19,188,188); >body *::-webkit-selection < background: rgba(255,251,102, 0.8); color: rgb(19,188,188); >body *::selection

Источник

Как сделать — Изменить цвет выделения текста

Узнать, как переопределить цвет выделения текста по умолчанию с помощью CSS.

Цвет выделения текста

Цвет выделения текста по умолчанию

Пользовательский цвет выделения текста

Изменить цвет выделения текста

Используйте селектор ::selection для переопределения цвета выделения текста по умолчанию:

Пример

::selection color: red;
background: yellow;
>

Совет: Подробнее о селекторе ::selection читайте в нашем CSS справочнике: CSS Свойство ::selection.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник