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 cre8ivecommando.com)

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 csstricks.com has explained (DEMO)
p::-moz-selection{background:#1259C7; color:#fff;}
p::selection{background:#1259C7; color:#fff;}

No comments:

Post a Comment

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,