::selection
Zmienia wygląd fragmentu tekstu zaznaczonego przez użytkownika myszą lub klawiaturą.
Przykład
#::selection {
background: #7c3aed;
color: #fff;
}
.code::selection {
background: #f59e0b;
color: #0c0c10;
}<p style="margin: 0 0 10px;">Zaznacz fragment tego akapitu, a potem kod poniżej.</p>
<pre class="code" style="margin: 0; padding: 10px 12px; border-radius: 10px; background: #18181b; font-size: 13px;">.card:hover { color: #fff; }</pre>Każdy fragment ma inny kolor zaznaczenia: akapit fioletowy, a blok kodu pomarańczowy.
Definicja i zastosowanie
#Pseudoelement ::selection odpowiada za fragment dokumentu, który użytkownik zaznaczył, np. przeciągając kursorem po tekście albo klikając dwukrotnie w słowo. Możesz zmienić kolor tła zaznaczenia i kolor tekstu, żeby pasowały do stylu strony.
Lista obsługiwanych właściwości jest krótka: przede wszystkim color i background-color, a według specyfikacji także dekoracja i cień tekstu. Marginesy, obramowania czy zmiana czcionki są ignorowane, bo zaznaczenie nie może zmieniać układu tekstu.
Reguła bez niczego przed dwukropkami (::selection) działa na całej stronie, a z selektorem, np. .code::selection, tylko w wybranym elemencie. Zadbaj o czytelny kontrast między tłem zaznaczenia a tekstem i nie ustawiaj przezroczystego tła, bo użytkownik straci informację, co zaznaczył.
Składnia
#selektor::selection { color: …; background-color: …; }Warianty zapisu
#- Bez selektora przed dwukropkami styl działa na całej stronie. Zaznacz tekst w obu akapitach.
- Żółte zaznaczenie jak zakreślaczem, tylko w akapicie z klasą
demo. Drugi akapit zostaje domyślny.
Warianty zapisu w praktyce
#::selection
::selection { background: #7c3aed; color: #fff; }.demo::selection
demo. Drugi akapit zostaje domyślny..demo::selection { background: #fde047; color: #0c0c10; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zachowaj wyraźny kontrast między tekstem a tłem zaznaczenia. Zaznaczony fragment musi być równie czytelny jak reszta.
- Nie ukrywaj zaznaczenia przezroczystym tłem. Jeśli tekstu nie powinno się zaznaczać, na przykład w przycisku, użyj
user-select: none.
Powiązane hasła
#- user-selectPozwala zablokować lub ułatwić zaznaczanie tekstu przez użytkownika.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- background-colorUstawia kolor tła elementu.
- ::placeholderStylizuje tekst podpowiedzi wyświetlany w pustym polu input lub textarea.
- ::first-lineStylizuje pierwszy wiersz tekstu w elemencie blokowym, niezależnie od tego, ile słów się w nim zmieści.
Widzisz błąd albo brakuje przykładu? Napisz do nas.