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 currently working at a leading web development company as a Sr. PHP Web Developer. He is the founder of the Xpert Developer. He has completed B.E. in Information Technology. Born and brought up in Ahmedabad. He loves to code and coding is all about passion for him. Follow him on twitter at Avinash Zala & Xpert Developer.

View all posts by: