Zmiana koloru zaznaczenia

W CSS3 możemy definiować kolor zaznaczonego tekstu i kolor zaznaczenia. Wykorzystujemy w tym celu pseudoelement selection.

W przykładach zastosowano następujący kod:

h1.green::selection {background: green; color:blue;} 
h1.red::selection {background: red; color:white;} 
h1.blue::selection {background: blue; color:red} 
h1.yellow::selection {background: yellow; color:black} 

Kod ten umieszczamy w arkuszu stylów witryny (tutaj, dla uproszczenia, umieściłem go w tekście wpisu, obejmując znacznikiem style).

Poniższe fragmenty tekstu zostały opatrzone odpowiednimi klasami, np. h1 class=”green” czy h1 class=”red”.

Niebieski tekst na zielonym tle.

Biały tekst na czerwonym tle.

Czerwony tekst na niebieskim tle.

Czarny tekst na żółtym tle.

Obejmij blokiem wyraz, wiersz czy kilka kolejnych wierszy i obserwuj zmianę kolorów.