:: выбор - CSS-хитрости | CSS Альманах 2024

Выделите это предложение курсором. Обратите внимание, как при выделении текста цвет фона заполняет пространство? Вы можете изменить цвет фона и цвет выделенного текста с помощью стиля ::selection. Стилизация этого псевдоэлемента отлично подходит для сопоставления выбранного пользователем текста с цветовой схемой вашего сайта.

p::-moz-selection ( color: red) p::selection ( color: red; )

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

Как видно выше, вы можете стилизовать ::selectionотдельные элементы. Вы также можете стилизовать всю страницу, отбросив пустой псевдоэлемент в таблице стилей.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Есть только три свойства, с которыми ::selectionбудут работать:

color
background( background-color, background-image)
text-shadow

См. Тесты Pen :: selection от Криса Койера (@chriscoyier) на CodePen.

Если вы попытаетесь применить стиль ::selectionсо свойством, которого нет в списке, это свойство будет проигнорировано. Это может быть сложно увидеть backgroundв этом списке, потому что свойство будет отображать цвет только при использовании, ::selectionи оно не будет отображать фоновое изображение или градиент.

Также не пытайтесь:

p::-moz-selection, p::selection ( color: red; )

Когда браузеры находят часть выбора, которую они не понимают, они отбрасывают ее целиком, так что это все время терпит неудачу.

Одно из наиболее полезных применений ::selection- отключение text-shadowво время выбора. A text-shadowможет конфликтовать с цветом фона выделенного фрагмента и затруднять чтение текста. Установите, text-shadow: none;чтобы текст был четким и легко читаемым при выделении.

Смотрите Pen :: selection text-shadow Криса Койера (@chriscoyier) на CodePen.

Необычные :: выбор

В паре с Sass или любым другим препроцессором вы можете создавать действительно крутые эффекты ::selection. Выделите текст в демонстрации ниже:

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

Еще один тупой, но забавный трюк - показать изображение через выделенный текст.

Поддержка браузера

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