Промяна на цвета при селектиране на текст само с CSS

Сигурен съм, че доста от вас са виждали на много сайтове интересната глезотийка, с която при селекция на определен текст, той променя цвета си или пък фона зад него. Начинът, по който се прави това е елементарен и не е нещо ново, но въпреки това доста хора и до този момент продължават да ме питат.

changeselectioncolors1

Ето и решението, което понякога може да се окаже наистина полезно, особено ако сте перфекционист и държите абсолютно всичко в дизайна ви да се вписва на 100%. Има и случаи, при които фонът за четене не е приятен и кофти чувството се засилва, виждайки лоша комбинация от цветове когато селектирате текста. Рядко е, но се случва.


/* Opera, Chrome, Safari, IE9+ */
::selection { background: #6bcf44; color: #fff; } 

/* Firefox */
::-moz-selection { background: #6bcf44; color: #fff; } 

Имайте предвид, че единствените пропъртита, които може да сложите на тези селектори са color, background и background-color. Освен това въпросните селектори остават непознати, както за архаичния Internet Explorer 6, така и за по-новите версии 7 и 8. На останалите браузъри няма проблем, само за Opera ще трябва да ползвате по-актуална версия (над 9.5).