CSS3 ::selection selektor - jak změnit barvu výběru (CSS)

CSS3 ::selection selektor - jak změnit barvu výběru (CSS)

Také jste si všimli, že na některých webech má vybraný text změněnou barvu oproti výchozí modré? Nejenže je to oživené nudného výběru, který je snad na 99% webů obyčeně modrý, ale je to také velmi efektivní způsob zlepšení čitelnosti vybraného textu. A co víc, dokonce tím dokonáte dílo grafiky vašeho webu. Vše se bude točit okolo CSS selektoru ::selection.


Změna barvy výběru textu pomocí CSS

Vše co je třeba je selektor ::selection. Pro Mozillu Firefox je však třeba použít selektor s prefixem pro mozillu (moz-), selektor pak vypadá takto ::-moz-selection.

::selection         { styly }
::-moz-selection { styly }

Použití CSS selektoru ::selection

Není nic jednoduššího. Pokud si pozorně prohlédnete styl vybraného textu nezměněného pomocí CSS, všimnete si, že je výběru (selection) nastaveno modré pozadí (background-color) a bílé písmo (color). 

Na tomto webu jsem barvu pozadí výběru změnil na zelenou (#5fa94e) a text nastavil bíle (#fff). Kód je následující:

::selection         { background:#5fa94e; color: #fff; }
::-moz-selection { background:#5fa94e; color: #fff; }

<< Back to the previous page


Write a comment
 If you cann't see the verification code clearly.
Type the characters into the text field below(*)
 
This website uses cookies for ads, just like any other website. Further information