11.6. Pseudoelement ::selection
Wprowadzenie: Stylizowanie zaznaczenia użytkownika
Kiedy użytkownik zaznacza tekst na stronie internetowej (np. przeciągając myszą), przeglądarka domyślnie podświetla go, używając systemowych kolorów (zazwyczaj niebieskie tło i biały tekst).
Pseudoelement ::selection
pozwala **nadpisać domyślne style zaznaczenia** i zdefiniować własny wygląd dla zaznaczonego fragmentu tekstu.
Daje to możliwość dostosowania wyglądu zaznaczenia do kolorystyki i stylu strony, poprawiając spójność wizualną.
Jak działa ::selection
?
Pseudoelement ::selection
stosuje się do fragmentu dokumentu, który został aktualnie zaznaczony przez użytkownika. Można go zastosować globalnie (bez poprzedzającego selektora) lub do konkretnych elementów, aby styl zaznaczenia różnił się w zależności od kontekstu.
<p class="custom-selection">Zaznacz fragment tego tekstu, aby zobaczyć niestandardowy styl zaznaczenia. Kolory tła i tekstu zostaną zmienione.</p>
<p>Ten tekst będzie miał domyślne zaznaczenie systemowe.</p>
/* Globalny styl zaznaczenia dla całej strony */
/* (Uwaga: niektóre przeglądarki wymagają prefixu -moz-) */
::selection {
background-color: #ffcc00; /* Żółte tło */
color: #333; /* Ciemny tekst */
}
::-moz-selection { /* Dla Firefoxa */
background-color: #ffcc00;
color: #333;
}
/* Niestandardowy styl zaznaczenia tylko dla elementów .custom-selection */
.custom-selection::selection {
background-color: darkred; /* Ciemnoczerwone tło */
color: white; /* Biały tekst */
}
.custom-selection::-moz-selection { /* Dla Firefoxa */
background-color: darkred;
color: white;
}
Wypróbuj: Zaznacz tekst w pierwszym akapicie - powinien mieć ciemnoczerwone tło i biały tekst. Następnie zaznacz tekst w drugim akapicie - powinien mieć żółte tło i ciemny tekst (lub domyślne style systemowe, jeśli globalne style ::selection
nie zostały zastosowane lub przeglądarka ich nie obsługuje w pełni).
Uwaga: Ze względu na historyczne różnice implementacyjne, dla zapewnienia kompatybilności z przeglądarką Firefox często dodaje się również regułę z prefiksem ::-moz-selection
.
Dozwolone właściwości CSS dla ::selection
Zakres właściwości, które można bezpiecznie stosować do ::selection
, jest **bardzo ograniczony**. Główne właściwości, które działają spójnie w większości przeglądarek, to:
color
: Kolor zaznaczonego tekstu.background-color
: Kolor tła zaznaczenia.text-shadow
: Cień dla zaznaczonego tekstu (wsparcie może być różne).cursor
: Kształt kursora nad zaznaczonym tekstem (rzadko używane).outline
: Obrys wokół zaznaczonego tekstu (wsparcie może być różne).
Właściwości takie jak background-image
, font-size
, margin
, padding
, border
**nie działają** lub nie są wspierane dla ::selection
.
Celem jest głównie zmiana kolorów zaznaczenia, aby pasowały do projektu strony, bez wprowadzania drastycznych zmian w układzie czy typografii.
Wskazówki dotyczące użycia ::selection
- Kontrast: Upewnij się, że wybrany kolor tekstu i tła zapewniają wystarczający kontrast, aby zaznaczony tekst był czytelny. Narzędzia do sprawdzania kontrastu (dostępne online lub w narzędziach deweloperskich) mogą być pomocne.
- Spójność: Staraj się używać spójnych stylów zaznaczenia na całej stronie, chyba że istnieje dobry powód, aby różnicować je w konkretnych sekcjach.
- Subtelność: Zbyt jaskrawe lub nietypowe kolory zaznaczenia mogą rozpraszać użytkownika. Często subtelna zmiana domyślnych kolorów jest lepsza niż drastyczna modyfikacja.
- Testowanie: Zawsze testuj wygląd zaznaczenia w różnych przeglądarkach (w tym Firefox z prefiksem
::-moz-selection
), aby upewnić się, że efekt jest zgodny z oczekiwaniami.
Zadania praktyczne
Zadanie 1 (z rozwiązaniem)
Zdefiniuj globalny styl dla ::selection
, który ustawi zielone tło i biały kolor tekstu dla zaznaczenia na całej stronie.
Rozwiązanie:
CSS:
::selection {
background-color: green;
color: white;
}
::-moz-selection { /* Dla Firefoxa */
background-color: green;
color: white;
}
Efekt: Cały tekst na stronie, po zaznaczeniu, będzie miał zielone tło i biały kolor.
Zadanie 2 (do samodzielnego wykonania)
Stwórz element blockquote
z cytatem. Zdefiniuj dla niego specyficzny styl ::selection
(inny niż globalny), np. z jasnoszarym tłem i ciemnoszarym tekstem.
Zadanie 3 (do samodzielnego wykonania)
Poeksperymentuj z właściwością text-shadow
wewnątrz reguły ::selection
, aby dodać subtelny cień do zaznaczonego tekstu.
FAQ - Najczęściej zadawane pytania
Dlaczego potrzebny jest prefiks ::-moz-selection
?
Przeglądarka Firefox przez długi czas implementowała tę funkcjonalność z prefiksem -moz-
. Chociaż nowoczesne wersje Firefoxa wspierają standardowy ::selection
, dodanie reguły z prefiksem ::-moz-selection
zapewnia lepszą kompatybilność wsteczną ze starszymi wersjami tej przeglądarki.
Czy mogę całkowicie wyłączyć podświetlanie zaznaczenia?
Teoretycznie można spróbować ustawić przezroczyste tło (background-color: transparent;
), ale nie jest to zalecane ze względu na użyteczność. Użytkownicy oczekują wizualnej informacji zwrotnej podczas zaznaczania tekstu. Lepiej dostosować kolory niż całkowicie usuwać podświetlenie.
Czy ::selection
działa na elementach formularzy?
Tak, ::selection
działa również na tekście wewnątrz edytowalnych elementów formularzy, takich jak input type="text"
czy textarea
, pozwalając dostosować wygląd zaznaczonego w nich tekstu.
Czy style ::selection
są dziedziczone?
Nie, style zdefiniowane dla ::selection
nie są dziedziczone przez elementy potomne w tradycyjny sposób. Jeśli chcesz zastosować styl zaznaczenia do wszystkich elementów wewnątrz danego kontenera, musisz zdefiniować regułę np. .kontener ::selection { ... }
.