CSS: Zmiana koloru zaznaczonego tekstu

Prosty trick na zmianę koloru zaznaczonego tekstu w CSS.

Co to jest ::selection?

Strony internetowe powinny być unikalne, wyróżniać się na tle konkurencji. Dziś poznasz fajny trick, który zmieni kolor zaznaczonego tekstu.

Użyjemy pseudo selektora - ::selection w wybranym elemencie, aby zmienić kolor tła. ::selection możemy zdefiniować na wybranym elemencie np. klasie .container, jeżeli nie zdefiniujemy elementu, wtedy ::selection zadziała na całej stronie.

// dodanie globalnego tła oraz koloru dla zaznaczonego tekstu ::selection { background: aquamarine; color: black; } // dodanie tła oraz koloru dla zdefiniowanego elementu <p class="custom-text-selection">Select some of this text.</p> .custom-text-selection::selection { background: deeppink; color: white; }

Przykład:

Zaznaczony tekst zmieni tło na różowy, oraz kolor na biały.