Saturday, 16 January 2010

Coloring the default text selection with CSS

Overriding the default text color using CSS

When you click and drag your mouse to copy or highlight any text in any website your browser by default give blue background color.
Didn't have a clue yet??Try selecting any part of text on this post and try it on elsewhere,try wikipedia.
Whats the difference?I have used an text selection property of CSS to override the blue default color to some light blue shade.(image from

In order to get this working for your blog you need to add following styles to your stylesheet.Just above your ]]></b:skin>
Till now it works only for Firefox and safari and does not supper IE.
::-moz-selection{background:#5eb7c3; color:#fff;}  /* Firefox */
::selection {background:##5eb7c3; color:#fff;} /* Safari */
And save your template.

More :
You can use it for paragraphs with different classes like has explained (DEMO)
p::-moz-selection{background:#1259C7; color:#fff;}
p::selection{background:#1259C7; color:#fff;}

No comments:

Post a Comment