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

как поменять цвет фона при выделении мышкойПри помощи простого правила CSS вы можете поменять цвет фона и шрифта при выделении текста мышкой.

Это не даст + при продвижении, но если у вас часто выделяют текст и копируют, то ваши посетители удивятся подобной штуке. Главное - подобрать цветовую гамму.

Если честно, то я подглядел подобную штуку на читаемом мною портале и решил позаимствовать. Быть может и вас заинтересует подобное "украшательство" для своего сайта.

Меняем цвет при выделении мышкой

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

Добавляем в свой файл стилей шаблона (обычно style.css) следующие строки:

::-moz-selection{background: #000; color: #fff;} 
::webkit-selection{background: #000; color: #fff;} 
::selection{background: #000; color: #fff;}

Сейчас мы задали правило для всех элементов на сайте. Можно задать для каких-то определенных свои настройки цвета. Например только для текста, который разбит на абзацы соотв. тегом:

p::-moz-selection{background: #000; color: #fff;} 
p::webkit-selection{background: #000; color: #fff;} 
p::selection{background: #000; color: #fff;}

В представленном коде мы делаем поддержку современных браузеров и задаем:

  • background: #000; - черный цвет фона. Можете менять на произвольный свой.
  • color: #fff; - цвет текста при выделении (сейчас белый). Так же меняйте на произвольный.

Чтобы подобрать необходимый цвет, можете воспользоваться пипеткой в программе FastStone Capture, либо одной из тысяч аналогичных пипеток в других программах.

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

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

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 2 комментария
  1. Артём Черкасов (83 комм.) says:
    http://zarabotka.guru/

    Темка интересная, какое-то разнообразие можно внести в свой ресурс.

  2. Серега (5 комм.) says:
    http://sevelweb.ru

    Спасибо за интересное решение, обязательно его реализую на своем ресурсе!

Не держи в себе. Выскажись.

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

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.66MB | MySQL:61 | 0,310sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html