Podczas zaznaczania fragmentu tekstu 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).
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.
Co znajdziesz w tym wpisie
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ą zmianom.
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:
- 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:
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 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
