:: wybór - CSS-Tricks | Almanach CSS 2025

Za pomocą kursora wybierz to zdanie. Zauważ, że gdy zaznaczasz tekst, kolor tła wypełnia przestrzeń? Możesz zmienić kolor tła i kolor zaznaczonego tekstu poprzez stylizację ::selection. Styl tego pseudoelementu doskonale nadaje się do dopasowywania tekstu wybranego przez użytkownika do schematu kolorów witryn.

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

Zwróć uwagę, że podwójny dwukropek jest niezbędny w składni tego pseudoelementu, mimo że inne pseudoelementy akceptują pojedynczy dwukropek.

Jak widać powyżej, możesz stylizować ::selectionposzczególne elementy. Możesz także stylizować całą stronę, upuszczając czysty pseudoelement w arkuszu stylów.

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

Istnieją tylko trzy właściwości, które ::selectionbędą działać z:

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

Zobacz testy Pen :: selection autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Jeśli spróbujesz stylizować ::selectionz właściwością, której nie ma na liście, ta właściwość zostanie zignorowana. Może to być trudne do zobaczenia backgroundna tej liście, ponieważ właściwość będzie renderować kolor tylko wtedy, gdy jest używana ::selectioni nie będzie renderować obrazu tła ani gradientu.

Nie próbuj też tego:

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

Kiedy przeglądarki znajdą część selekcji, której nie rozumieją, odrzucają całą rzecz, więc to zawsze kończy się niepowodzeniem.

Jednym z najbardziej przydatnych zastosowań ::selectionjest wyłączenie a text-shadowpodczas zaznaczania. text-shadowMoże kolidować z kolorem zaznaczenia w tle i sprawiają, że tekst trudny do odczytania. Ustaw, text-shadow: none;aby tekst był wyraźny i czytelny podczas zaznaczania.

Zobacz Pen :: selection text-shadow autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Fantazyjny: wybór

W połączeniu z Sassem lub jakimkolwiek innym preprocesorem możesz tworzyć naprawdę fajne efekty ::selection. Wybierz tekst w pokazie poniżej:

Możesz zauważyć, że w niektórych przeglądarkach efekt nie jest tak płynny. Zapiszmy to demo w kategorii: rzeczy, które są możliwe, ale prawdopodobnie dla zabawy.

Kolejna głupia, ale zabawna sztuczka polega na ujawnieniu obrazu poprzez wybrany tekst.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.