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

❮ Назад Вперед ❯

Селектор ::selection применяет стиль к выделенному пользователем тексту в документе. Он определяет, какого цвета должен быть текст при выборе.

Фоновый цвет по умолчанию - синий. Это свойство используется, чтобы изменить цвет по умолчанию.

Только некоторые CSS свойства могут быть использованы для добавления стиля к псевдоэлементам ::selection:

color
background-color
text-shadow
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color

С данным селектором используется префикс -moz- в виде ::-moz-selection.

Этот псевдоэлемент был представлен в CSS селекторах Level 3, но потом удален, а сейчас представлен в Level 4.

Версия

CSS Pseudo-Elements Level 4

Синтаксис

::selection {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ::-moz-selection { 
      color: #eee;
      background: #8ebf42;
      }
      ::selection {
      color: #eee;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::selection s</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
  </body>
</html>

Попробуйте сами!

Выберите текст и увидите цвет сами:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .green::-moz-selection{
      background-color: #8ebf42;
      }
      .green::selection{
      background-color: #8ebf42;
      }
      .yellow::-moz-selection{
      background-color: #1c87c9;
      }
      .yellow::selection{
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::selection</h2>
    <p>Текст с фоновым цветом по умолчанию.</p>
    <p class="green">Выберите этот текст, чтобы увидеть зеленый фон</p>
    <p class="yellow">Выберите этот текст, чтобы увидеть желтый фон.</p>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример с элементами <textarea> и <input>:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      input::-moz-selection{
      color: #1c87c9;
      background-color: #eee;
      }
      input::selection{
      color: #1c87c9;
      background-color: #eee;
      }
      textarea::-moz-selection{
      color: white;
      background-color: #8ebf42;
      }
      textarea::selection{
      color: white;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::selection</h2>
    <p>Input element</p>
    <form><input type="text" value="Выберите этот текст" /></form>
    <p>Textarea element</p>
    <textarea rows="5" cols="25">Выберите этот текст</textarea>
  </body>
</html>