Aby zmienić kolor zaznaczenia tekstu w HTML, należy posłużyć się językiem CSS, wykorzystując pseudoelementy ::selection oraz (dla lepszej kompatybilności) ::-moz-selection. Pozwalają one kontrolować wygląd tekstu wybranego przez użytkownika — np. gdy przeciągnie fragment tekstu myszką lub zaznaczy go na urządzeniu mobilnym.
Dlaczego warto zmienić kolor zaznaczenia tekstu?
Domyślny kolor zaznaczenia zależy od przeglądarki oraz systemu operacyjnego (najczęściej jest to niebieski lub jasnoniebieski). W niektórych stylizacjach strony może to wyglądać nieestetycznie lub być mało czytelne. Dobrze dobrany kolor zaznaczenia podkreśla identyfikację wizualną serwisu oraz poprawia czytelność i dostępność zawartości.
Jak zastosować własny kolor zaznaczenia tekstu?
Do tego celu używamy CSS. Poniżej szczegółowy przykład:
/* Styl dla większości nowoczesnych przeglądarek */
::selection {
background: #ffe47a;
color: #333333;
}
/* Styl dla przeglądarki Firefox */
::-moz-selection {
background: #ffe47a;
color: #333333;
}
- background – kolor tła podczas zaznaczania tekstu;
- color – kolor czcionki podczas zaznaczania tekstu.
Przykład zastosowania w praktyce
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład zmiany koloru zaznaczenia tekstu</title>
<style>
::selection {
background: #b53cff;
color: #fff;
}
::-moz-selection {
background: #b53cff;
color: #fff;
}
body {
font-family: Arial, sans-serif;
padding: 2rem;
background: #f0f0f0;
color: #222;
}
</style>
</head>
<body>
<h1>Poradnik: zmiana koloru zaznaczenia tekstu w HTML i CSS</h1>
<p>Zaznacz fragment tego tekstu, aby zobaczyć efekt zmiany koloru!</p>
</body>
</html>
Szczegółowe wyjaśnienie działania
- ::selection to pseudoelement CSS, który pozwala określić styl tylko dla tej części tekstu, którą użytkownik aktualnie zaznaczył kursorem;
- przeglądarka Firefox wymaga osobnej wersji: ::-moz-selection, aby zachować zgodność;
- możesz ustawić dowolny kolor tła (
background) i tekstu (color). Możliwe jest także nadanie np. innego kroju czcionki czy koloru podkreślenia (choć nie wszystkie właściwości są tu obsługiwane).
Ograniczenia
- Nie wszystkie właściwości CSS są dostępne w tym pseudoelementcie. Działają jedynie te najważniejsze:
background,color,text-shadow, ewentualniebackground-image; - możesz stylizować selekcję dla całej strony lub tylko dla określonych elementów (np. nagłówków, akapitów).
Przykład selektywnego stylowania
p::selection {
background: #e91e63;
color: #fff;
}
Efekt dotyczy tylko zaznaczonego tekstu wewnątrz paragrafów <p>.
Najczęstsze zastosowania
- dopasowanie kolorów zaznaczenia do identyfikacji wizualnej marki,
- poprawa kontrastu i czytelności na ciemnych lub jasnych tłach,
- wyróżnienie ważnych fragmentów w edytorach online, dokumentacjach czy blogach.
Wskazówki projektowe
- przy wyborze kolorów zadbaj o kontrast. Kolor tekstu na zaznaczeniu musi być dobrze widoczny na tle koloru tła,
- sprawdź efekt na różnych przeglądarkach, zwłaszcza jeśli korzystasz z niestandardowych kolorów lub trybów (np. tryb ciemny),
- zadbaj o spójność kolorystyki z całą stroną.
Zmiana koloru zaznaczenia to niewielka, ale efektowna modyfikacja, dzięki której Twoja witryna zyska na profesjonalnym wyglądzie i spójności.
