We all know that CSS is used for styling of the webpage content.

As CSS updates arrives we get more control over element styling and designing.

Here is one of them updates from CSS to assign selection color to the text on webpage. Windows provides dark blue color to the selected text and MAC provide the lighter blue upon selection of text.

But with this CSS trick Mozila Firefox, Interner Explorer 9, Opera and Web Kit browsers allow user to change the color of selected text.

[cc lang=”css”]
/* webkit, opera, IE 9 */
::selection { background:lightblue; }
/* mozilla firefox */
::-moz-selection { background:lightblue; }
[/cc]

-moz prefix is used to assign css styling to Mozila Firefox browser only.
So ::-moz-selection is used for Mozila Firefox and ::selection is used for other weblit based browsers.

Like other CSS selector we also can nest the CSS styling.

[cc lang=”css”]
/* webkit, opera, IE9 */
div.highlightBlue::selection { background:lightblue; }
/* mozilla firefox */
div.highlightBlue::-moz-selection { background:lightblue; }

/* webkit, opera, IE9 */
div.highlightPink::selection { background:pink; }
/* mozilla firefox */
div.highlightPink::-moz-selection { background:pink; }
[/cc]

Demo:

This should be with Lightblue background

This should be with Pink background

Thanks David Walsh for this post