Как изменить цвет по умолчанию выделенного текста с помощью 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 селектора или псевдоэлемента .
Добавление стиля с помощью этого псевдоэлемента в соответствии с цветами вашего сайта (вместо использования скучного синего фонового цвета при выделении текста) может сделать вашу веб-страницу интересным. Для определенной части вашей страницы можете выбрать фоновый цвет выделения или применить разные цвета для разных частей.
Как в CSS сделать выделение текста цветом?
Как в CSS сделать выделение текста цветом? Цвет выделения может быть в RGBA-формате, т.е. с прозрачностью. Имеется ввиду не выделение курсором. А изначально текста выделен.
Отслеживать
Frontender
задан 16 янв 2017 в 4:16
Frontender Frontender
2,625 23 23 золотых знака 66 66 серебряных знаков 116 116 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
div < color: #fff; max-width: 400px; text-align: center; >div > span
Как в CSS сделать выделение текста цветом? Цвет выделения может быть в RGBA-формате, т.е. с прозрачностью. Отслеживать
ответ дан 16 янв 2017 в 5:02
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как задать цвет выделения текста?
Выделение обычно применяется для копирования в буфер фрагмента текста, чтобы после этого вставить выделенный фрагмент в другое место. Например, в текстовый редактор для дальнейшей правки текста. Сам цвет и фон выделенного фрагмента определяется настройками операционной системы, но с помощью CSS эти параметры можно задать самостоятельно.
Чтобы указать цвет и фон выделенного текста применяется псевдоэлемент ::selection, в котором задаются свойства color и background, как покаано в примере 1.
Пример 1. Цвет выделенного текста
В условиях электромагнитных помех, неизбежных при полевых измерениях, не всегда можно опредлить, когда именно волна ненаблюдаемо стабилизирует кварк
Результат данного примера показан на рис. 1.
Рис. 1. Цвет и фон выделенного текста
См. также
Меняем цвет выделения текста с помощью CSS.
Одна из интересных функций CSS3, которую мы и рассмотрим сегодня, носит имя «::selection», при помощи которой можно заменить стандартный цвет выделения текста в браузере. Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному. Однако, на мой взгляд, стоит быть в курсе всех новинок дабы не отставать от этих, так сказать, «вперед-идущих» техник.
::selection background: #ffb7b7; /* Safari */
>
::-moz-selection background: #ffb7b7; /* Firefox */
>
Цвет выделения текста будет, как можно догадаться, красным. Можно добавить несколько параграфов и определить для них разные цвета выделения.
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;
>
- css
- каскадные таблицы стилей