Zmiana koloru zaznaczenia tekstu – właściwość CSS ::selection
Podczas zaznaczania tekstu (lub tylko jego fragmętu) na stronie internetowej tło umieszczone bezpośrednio pod nim zmienia on kolor np. na ciemno niebieski, modrakowy (w zależności od przeglądarki internetowej).
Jest to domyśle ustawienie przeglądarki internetowej. Zazwyczaj tego koloru się na stronie nie zmienia, bo np. ludzie są do niego przyzwyczajeni. Nie oznacza to jednak, że nie można tego zrobić. Wystarczy jedynie wiedza na temat tego do jakiego elementu trzeba się odwołać w CSS.

Właściwość CSS ::selection
W tym przypadku chodzi o pseudoelement ::selection. Z jego pomocą możemy wpłynąć na właściwości zaznaczanego tekstu – zmieniając jego różne właściwości nie tylko samo tło. Na chwilę obecną dużo przeglądarek korzysta z tego elementu jednak nie wszystkie! Dlatego też zmiana nie będzie w nich widoczna.
Co możemy zmienić w zaznaczonym fragmencie tekstu
Właściwości CSS jakie mamy możemy wykorzystać na zaznaczonym tekście jest kilka są to:
- color – właściwość odpowiadająca za koloru fontu/ elektronicznej czcionki
- background-color – kolor tła pod zaznaczeniem
- cursor – kształt kursora myszy
- outline – obramowanie
- text-decoration – ozdobniki tekstu np. podkreślenie
- text-emphasis – kolor
- text-shadow – dodanie cienia pod słowa
Wszystkie powyższe właściwości są podlinkowane – dlatego jak macie chwilę możecie o nich poczytać.
Przykład – ZAZNACZ TEKST z Codepen:
See the Pen Selection color CSS ::SELECTION by Aura (@Julka85) on CodePen.0
Przykładowa deklaracja CSS dla <p> (akapitu)
p::selection { color:pink; background: green; } p::-moz-selection { /* dla Firefox */ color: pink; background: green; }
Właściwość ta działa poprawnie w większości przeglądarek jednak nie zawsze tak samo. W niektórych przeglądarkach nie wszystkie cechy ulegają zmianie np. zmienia się kolor tekstu a nie tło (Opera)
Komputery
Chrome | Opera | Firefox | IE | Edge | Safari |
4 | 9.5-9.6 | 2* | 9 | 12 | 3.1 |
Mobilne
iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
No | 11.5 | No | 4.4 | 59 | 55* |
źródło: https://www.w3schools.com/css/css_pseudo_elements.asp
dodatkowe tagi:
zmiana koloru zaznaczonego tekstu z pomocą css, html
Jak zrobić kolorowe zaznaczenie tekstu, czcionki, fomtu
Zmiana koloru z domyślnego na inny po zaznaczeniu tekstu
selektor ::selection dla strony www, witryna internetowa
Mam pytanie – w plikach css na moim szablonie nie ma w ogóle sekcji „selection” – a bardzo zależy mi, żeby zmienić kolor zaznaczenia tekstu. Jak inaczej można do tego dojść?
Wartość „::selection” jest domyślna (dla danej przeglądarki) nie musi więc znajdować się w plikach CSS. Nic nie stoi jednak na przeszkodzie, żeby ją samemu dodać. W tym celu trzeba zmodyfikować style szablonu.
Jeśli korzysta Pani z WordPress warto sprawdzić czy w ustawieniach szablonu nie ma opcji dodawania kodu CSS i dopisać tam „::selection”. Modyfikacje wprowadzane bezpośrednio w motyw mogą zostać „nadpisane” podczas aktualizacji – w efekcie trzeba je będzie ponownie wprowadzić.