Kurs HTML

11.6. Pseudoelement ::selection

Strona główna > Kurs CSS > Rozdział 11: Pseudoelementy > 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 { ... }.