Inter-Net.PRO

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

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

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


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

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

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

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

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

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

Для браузера Mozilla этот псевдоэлемент указывается с префиксом и имеет название -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;
}

 

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


Видео по данному псевдоэлементу:

 

 

Авторизация

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