|
Изменить цвет выделенного текста на сайте
|
|
| Kosten | Воскресенье, 21 Апреля 2019, 01:36 | Сообщение 1 |
| В этой небольшой статье разберем, как сделать красивый выделяемый текст, а точнее просто поменять оттенок цвета. Если изначально каждый браузер выводит цвет по своему, но все же он везде почти аналогичный. То теперь вы можете задать той статье или описанию, где зададите нужный класс.
Если рядом будет описание и там все по стандарту, то под заданным классом увидите совершенно другой оттенок, как начнете выделять его.
Так как свойство ::selection определяет псевдо-селектор для элемента, чтобы стилизовать текст внутри него, когда он выбран. Обратите внимание, что если вы не объедините любой другой селектор, ваш стиль будет применен на уровне корня документа, к любому выбираемому элементу.
HTML
Код <p class="ksandsam-sanuoibed">Здесь описание, что нужно правым кликом обвести</p>
CSS
Код ::selection {
background: #71f5c8;
color: #080808;
}
.ksandsam-sanuoibed::selection {
background: #e40e82;
color: #f9f7f7;
}
Теперь вы можете на сайте разнообразить свой ресурс по оформлению, особенно тот материал, который изначально понимаете на перед, что его будут обводить, больше всего для копирование.
Поддержка браузера 86,5%
Демонстрация
| | [ RU ] |
| |
| Kosten | Воскресенье, 21 Апреля 2019, 01:41 | Сообщение 2 |
|
| Чтоб невозможно скопировать, то делает содержимое недоступным для выбора.
HTML
Код <p class="deltudavin">Здесь идет описание</p>
CSS
Код .deltudavin {
user-select: none;
}
user-select: none указывает, что текст не может быть выделен.
| | [ RU ] |
| |
| -SAM- | Понедельник, 22 Апреля 2019, 01:31 | Сообщение 3 |
| Цитата Kosten (  ) Поддержка браузера 86,5%
Цитата Kosten ( ) user-select: none
UPD.: так и понял (ну и в моём случае всё равно работать не будет оно, нужно еще дописывать префиксы).
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Сообщение отредактировал
-SAM- - Понедельник, 22 Апреля 2019, 01:53 | | [ UA ] |
| |
| Kosten | Понедельник, 22 Апреля 2019, 01:43 | Сообщение 4 |
|
| -SAM-, приветствую, это демка не та, она идет на Scrollbar.
Все исправил.
| | [ RU ] |
| |
| Kosten | Понедельник, 22 Апреля 2019, 04:21 | Сообщение 5 |
|
| Цитата -SAM- ( ) Как бы это вовсе другая тема, которая уже была раскрыта здесь
Бывает так, что зайдешь по одному запросу, а здесь ссылки на другую темы, что не лишним будет. А что повторяюсь, тут дело в другом.
| | [ RU ] |
| |
