• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Изменить цвет выделенного текста на сайте (Меняем цвет фона выделенного текста при помощи CSS)
Изменить цвет выделенного текста на сайте
Kosten
Дата: Воскресенье, 2019-04-21, 01:36 | Сообщение 1
Онлайн
Администраторы
Сообщений:24946
Награды: 57


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

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

Так как свойство ::selection определяет псевдо-селектор для элемента, чтобы стилизовать текст внутри него, когда он выбран. Обратите внимание, что если вы не объедините любой другой селектор, ваш стиль будет применен на уровне корня документа, к любому выбираемому элементу.



HTML

Код
<p class="ksandsam-sanuoibed">Здесь описание, что нужно правым кликом обвести</p>

CSS

Код
::selection {
    background: #71f5c8;
    color: #080808;
}
.ksandsam-sanuoibed::selection {
    background: #e40e82;
    color: #f9f7f7;
}

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

Поддержка браузера 86,5%

Демонстрация
Прикрепления: 4649799.png(2.5 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-04-21, 01:41 | Сообщение 2
Онлайн
Администраторы
Сообщений:24946
Награды: 57


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

HTML

Код
<p class="deltudavin">Здесь идет описание</p>

CSS

Код
.deltudavin {
  user-select: none;
}

user-select: none указывает, что текст не может быть выделен.
Страна: (RU)
-SAM-
Дата: Понедельник, 2019-04-22, 01:31 | Сообщение 3
Оффлайн
Друзья сайта
Сообщений:590
Награды: 25


Цитата Kosten ()
Поддержка браузера 86,5%
Почему-то на демонстрации не работает у меня (или демка не та, а на стилизацию полосы прокрутки и недописанная, что для браузеров webkit только). Знаю еще, что для браузеров Firefox, что старые идут и от версии первой начиная, то специально свой пседвоэлемент ::-moz-selection сделан. В общем, для кроссбраузерности нужно дублировать стиль, прописывая там еще выше упомянутый и ::-webkit-selection.
Цитата Kosten ()
user-select: none
Как бы это вовсе другая тема, которая уже была раскрыта здесь (иначе мы возвращаемся к ней и снова писать придётся про то, что кто пропишет, и оно не будет работать у всех - нужно делать кроссбраузерную пропись).

UPD.: так и понял (ну и в моём случае всё равно работать не будет оно, нужно еще дописывать префиксы).




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.


Сообщение отредактировал
-SAM- - Понедельник, 2019-04-22, 01:53
Страна: (UA)
Kosten
Дата: Понедельник, 2019-04-22, 01:43 | Сообщение 4
Онлайн
Администраторы
Сообщений:24946
Награды: 57


-SAM-, приветствую, это демка не та, она идет на Scrollbar.

Все исправил.
Страна: (RU)
Kosten
Дата: Понедельник, 2019-04-22, 04:21 | Сообщение 5
Онлайн
Администраторы
Сообщений:24946
Награды: 57


Цитата -SAM- ()
Как бы это вовсе другая тема, которая уже была раскрыта здесь

Бывает так, что зайдешь по одному запросу, а здесь ссылки на другую темы, что не лишним будет. А что повторяюсь, тут дело в другом.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Изменить цвет выделенного текста на сайте (Меняем цвет фона выделенного текста при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: