CSS Selection Styling

  • Avinash
  • 2
  • Dec 14, 2010
  • Web Design

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.

/* webkit, opera, IE 9 */ ::selection { background:lightblue; } /* mozilla firefox */ ::-moz-selection { background:lightblue; }
/* webkit, opera, IE 9 */
::selection { background:lightblue; }
/* mozilla firefox */
::-moz-selection { background:lightblue; }

-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.

/* 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; }
/* 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; }

Demo:

This should be with Lightblue background

This should be with Pink background

Thanks David Walsh for this post

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: