Sunday, August 12, 2012

How to Change the Default Text Selection Color with CSS

The topic above has been described by my senior blogger friend Brian Gardner as I have quoted a part below.

If you’re like me, you’ve spent hours surfing the web looking for design inspiration. And if you have, then no doubt you’ve probably stumbled across the same websites of pristine designers who I pretty much think can do no wrong. Once you’re there, highlight some of their text and you’ll see something you might not have seen before. Better yet, something you wish you had on your website. I’m talking about the behavior and style of text selection, which is a part of CSS that most folks don’t know much about.
What is Text Selection?
By definition, the ,::selection selector matches the portion of an element that is selected by a user. In other words, when you select a portion of someone’s site content, you’ll see that the text is displayed as a highlight. By default, most browsers use a very light blue background color with no change to the font color.
How to Change the Default Text Selection Color
Now to the good stuff – only a few CSS properties can be applied to ::selection: color, background, cursor, and outline. The ::selection selector is supported in IE9+, Opera, Google Chrome and Safari. Firefox supports an alternative, the ::-moz-selection.
For more detailed information, please read more here
Happy Blogging !