Школа
Веб-разработка

Как изменить цвет выделения текста на сайте, ::selection

21 сен 2023
👁 2982  
Веб-разработка

Как изменить цвет выделения текста на сайте, ::selection

21 сен 2023
👁 2982  
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 8
8
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

Доступные для изменения в ::selection свойства ограничены здравым смыслом. Можно изменить фон, цвет, тень и подчёркивание‑зачёркивание текста, нельзя изменить шрифт, кегль или интерлиньяж. Стили ::selection не работают на айфоне и некоторых других телефонах и планшетах.

::selection {
  background: rgba(5, 80, 255, .65);
  color: #fff;
}

code ::selection {
  background: #000;
  color: #31ff53;
  text-shadow: -1px 1px #0043ff;
  text-decoration: underline;
}

Вся эта страница совета — рабочий пример. Попробуйте выделить текст и код.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 8
8
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

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

Рекомендуем другие советы