Change the style of selected text
I recently learned this neat little css snippet that allows you to style selected text (this only works in Firefox… but really… what else matters?
)
Just put the following code somewhere into your stylesheet making sure to change the background and color to match your own design! For an example of this code in action just select some of the text here on my site
*::-moz-selection { background: #000 none repeat scroll 0 0; color: #fff; }
Update!
This same effect can be used in Safari as well by including the following code:
::selection { background: #000 none repeat scroll 0 0; color: #fff; }
Thanks to Andrew Houle of myinkblog.com for that tip
!



























Hi Dani,
Just stopped by to see this neat little trick and realized I had never commented how much I absolutely LOVE your site design. I’m sure you get compliments on it all the time but I just wanted to give my 2 cents and say what an AMAZING, creative style you have made here. It’s nice to see something so truly unique and original in a Wordpress theme. Keep up the great work!
Brian
PS. Your last name’s not bad, either.
Brian McDaniel´s last blog ..Links for 2009-07-13 [del.icio.us]
Thank you so much Brian! You made my day
Hi Dani,
I love this simple progressive enhancement as well! Just so you know, you can also get this to work in Safari, by using ::selection { css stuff }
Andrew Houle´s last blog ..Don’t Freelance If…
Awesome Andrew thank you!
Hi Dani,
Excellent Post.
Thanks for sharing.
Keep it up.
Muy buen blog de diseño! great blog! thanks from Argentina.
Dani,
I see this on very few websites but it is such a nice added detail. Thanks for sharing how to do it!
Brian Yerkes´s last blog ..Creatively Display Client Testimonials Using CSS
I really like your blog and i respect your work. I’ll be a frequent visitor.
Haha. Very Cool!
Woot!!.. nice tips..
Nice tip! Must add that to my sites soon, glad to see it’s so easy! Thanks for the share.
Barbara Ling, Virtual Coach´s last blog ..BY Invitation ONLY – Income Fitness Launch
Thanks for the tip Dani. Really a very simple and magnificent one. Will use it for my site. Thanks again
I always highlight text as I read it, it’s an old habit. So sometimes there are sites that use this trick, but use it with a low contrast between the background and the text, and that can be quite annoying. So if you are going to use this little trick, make sure the text is doesn’t take away from readability when highlighted.
These tricks also work on Opera and Google Chrome.
The second trick also works on Chrome but I don’t know that which one works on Opera.
Joe´s last blog ..Designing a theme
I dont like considering safari,chrome, opera yet. Only IE,and FF i will design and develop. The rest if it is working i will be happy, if not i really dont care.
Double Din Navigation´s last blog ..Mini Itx Motherboard
Hello ,Guys,Today i see your blog occasionally,your blog is very cool, the content is intereting ,I often will come here.
Tom Jeccy´s last blog ..BlogBeast Magazine and Blogging Theme
haha nice work there and thanks for sharing all the info. We take 10 mins to read your stuff but im sure thats at least 5-10 hours of preparation work there.
thanks!
This is hot , i tweeted this . Just curious about this piece of code ->( scroll 0 0; ) What’s that for ? Could this prevent page scrolling while selecting text ? Interesting .
9swords´s last blog ..Halloween Special: Dining with Classic Movie Monsters
Thank you and thanks for tweeting!
and i believe it’s all the background properties shorthand style
I have been using this on my blog for some time now, I have to say it looks really cool…
Compute Live´s last blog ..Firefox 4.0 mockup for Linux
Hi Dani, first off : WOW ! Your site ( design) just blew me away – its so UBERAWESOME ! secondly : its so great to see there are AWESOME women web designers out there [ as I dont see too many ] Im so glad I discovered your site & def linking you to mine
)
)
P.S. one of these days when I make tons of money I will def hire you to design a theme for me as well !
Thansk for sharing this little Css tid bit btw
MIA´s last blog ..Design vs. Content
You’re welcome
and thank you Mia!
Hi your website looks really cool, especially this text boxes are really impress me. I am also love dark color themes. the borders around the boxes are excellant
freeze gridview´s last blog ..LINQ and Entities for binding GridView
Great tips thanks, i dont think this validates though…
That’ a really nice effect!
I will use it in my future projects! Thanks!
Tom´s last blog ..Canon EOS Buch für Fotopraxis in der Natur
yooo..
this is what i was lookin’ for..
thanks for the great tip – will def. use..
and yeaa..
by the way, like already said – fresh design here .. ;d
cheers from germany
I also got excited back when I discovered that “trick”, but then got disappointed when found out it makes a sites CSS come out invalid per W3C (a much bigger disappointment is the CSS hack for making round corners not being W3C valid).
Gus´s last blog ..Wax art on hardboard – by Gustavo Olmedo
changed from “black foreground on selections” to “background color is new foreground color when selected” (as users would expect it, especially those with black foreground colors)
resource magazine´s last blog ..Understanding Life As A Christian
Firefox is shows u what you are expecting in the shortest period of time (nO Offences but IE is like crap),I love firefox
shoaib hussain´s last blog ..Maximize Battery Life Of Windows 7 By Turning Off Windows Aero And Glass
Hi Dani.Im very new to all this and this site will help me no end.Thanks for sharing with us.
Great Tip. Keep doing good work like this.
Web Design London´s last blog ..Bond Media Services
I’ve wanted to know how to do this for ages – many thanks for the great tip!
Ann McLaren´s last blog ..Great Entrepreneurs Don’t Just Talk The Talk