Inter-Net.PRO
выделение текста

  Как на сайте изменить выделение текста и вместо стандартных браузерных стилей назначить свои.

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

  Для оформления выделения текста есть специальный псевдоэлемент CSS с названием selection.


Псевдоэлемент selection

  ::selection - это псевдоэлемент в CSS.

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

  Для псевдокласса selection доступны следующие CSS свойства:

color - цвет текста;

background - цвет фона выделяемого текста;

backgroud-color - цвет фона выделяемого текста;

text-shadow - тень текста

  Псевдоэлемент selection понимают все браузеры кроме iOS Safari.

  Для браузера Firefox до 62 версии (дата выхода 62 версии - конец 2018г) этот псевдоэлемент указывается с префиксом -moz-, а значит пишется как -moz-selection

  В CSS этот псевдоэлемент добавляется через два двоеточия:

::selection


Демо - попробуйте выделить мышкой текст в блоке ниже:

  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Напоивший, сих букв проектах возвращайся коварный лучше океана. Города, точках, текстов. Безорфографичный первую маленькая бросил эта дорогу переписали, составитель там выйти коварных. Предложения его ручеек буквоград свою, своего лучше всеми, домах, lorem текста великий все. Коварных путь предупредила, вершину несколько?

 

  В примере использована следующая конструкция (сам текст я укоротил):

<div class="test-selection">
    <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут...</p>
</div>

 

CSS код:

.test-selection p::selection {
    background-color: #000;
    color: #ff6000;
}
.test-selection p::-moz-selection {
    background-color: #000;
    color: #ff6000;
}

  Я пробовал прописать классы через запятую чтобы два раза не писать одни и те же свойства - не заработало. Пришлось для Firefox повторно прописывать значения css-свойств для selection.

 

Войдите чтобы комментировать

Авторизация

Войти через соцсети: