Zmiana koloru zaznaczenia właściwość CSS ::selection

Kategoria wpisu Kurs CSS, PHP, HTML, CSS, Pseudo elementy Tagi: , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 4,00 z 5)
Loading...

Jak zapewne każdy zauważył podczas zaznaczania na stronie internetowej fragmentu tekstu tło pod nim zmienia on kolor np. na ciemno niebieski, modrakowy (w zależności od przeglądarki). Jest to domyśle ustawienie przeglądarki internetowej (w plikach CSS nie trzeba jej podawać). Nie oznacza to w cale, że nie możemy tej barwy zmienić. Jeśli tylko chcemy to możemy tego dokonać prosty sposób korzystać z różnych właściwości CSS.

Właściwość CSS ::selection

W tym przypadku pomocny okaże się pseudoelement ::selection wykorzystywany właśnie do formatowania tekstu. Z jego pomocą możemy wpłynąć na właściwości zaznaczanego tekstu. Niestety nasza zmiana będzie widoczna jedynie w przeglądarkach obsługujących odpowiednią zmianą.

Co oprócz koloru tła możemy zmienić w zaznaczonym tekście

Właściwości CSS jakie mamy możemy wykorzystać na zaznaczonym tekście jest kilka są to:

Wszystkie powyższe właściwości są podlinkowane – dlatego jak macie chwilę możecie o nich poczytać.

Przykład:

See the Pen Selection color CSS ::SELECTION by Aura (@Julka85) on CodePen.0


Przykładowa deklaracja CSS dla p (akapitu)

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

ChromeOperaFirefoxIEEdge Safari
4 9.5-9.62*912 3.1

Mobilne

iOS SafariOpera
Mobile
Opera
Mini
AndroidAndroid
Chrome
Android
Firefox
No11.5No4.45955*

źródło: https://www.w3schools.com/css/css_pseudo_elements.asp

dodatkowe tagi:
zmiana koloru zaznaczonego tekstu css, html
Jak zrobić kolorowe zaznaczenie tekstu, czcionki, fomtu
Zmiana koloru z domyślnego na inny po zaznaczeniu tekstu
selektor ::selection
strona www, witryna internetowa

2 thoughts on “Zmiana koloru zaznaczenia właściwość CSS ::selection

    1. Aurelia

      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ć.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *