Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Recently when visiting a website I noticed that when its text was selected it had a theme that fit his website. Normally when text is selected it is a dark blue color. Now if your website doesn’t have any blue in it, would this not look a bit out of place?
When hunting for the solution of how this was done, I was pleasantly surprised how easy it was. Just add the following CSS to your page:
::selection { background: #A8141B; color: white; /* Safari */ }
::-moz-selection { background: #A8141B; color: white; /* Firefox */ }
As you can see, this only works in Firefox and Safari at the moment. This may seem like nothing, but it is a subtle effect that can add some visual appeal to your website!
Highlight any text on this page to view the above CSS in action (using Safari / Firefox).
Hugo Says:December 15th, 2008 at 5:56 am
Works well in Google Chrome 0.4 – 1.0 and FLock 2.0. Maxthon and IE (as expected) did not work.
Nice effect! Adds that touch of detail and what I like to call ‘distinction’ to a site. Thanks for sharing!
December 19th, 2008 at 8:43 am
[...] Vía Brenezl [...]
Hashim Says:December 21st, 2008 at 11:49 pm
I need to know more about CSS
Jake Says:Thanks for this, I was afraid I would have to go into complicated javascripts to get this result.
[...] Vía Brenezl [...]
Joren Rapini Says:January 19th, 2009 at 10:26 am
Nice man! I just saw this effect on css-tricks, googled it and yours was the first site that came up.
Aksel Says:Testing your CSS trick I found out that you have one of the most broken appearance in IE 6 that I have seen lately.
Akhyar Says:Thank’s For Your Tutorial about CSS
Tito Says:Works fine in IE9, Chrome, Firefox
Raj Says:thanks for the tip… i am looking for this… do u know any other code which also works on IE..?
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!