Change the style of selected text

Posted in CSS, Mozilla Firefox on Jul 14, 2009 by dani

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 :D !

Author: dani
Web designer/front-end web developer who hugs trees, loves animals, and is totally addicted to social media. :) Find me @ danimcdaniel.com or tweet me @dani!
Subscribe to RSS feed Show me some social luv
  • Digg this!
  • Stumble This!
  • Float This!
  • Bump This!
  • Click to bookmark this page on Reddit!
  • Share on Facebook!
  • Tweet This
  • Bookmark this site!
  • Subscribe to RSS Feed

36 Comments

  • Brian McDaniel says:

    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]

    • dani says:

      Thank you so much Brian! You made my day ;)

  • Andrew Houle says:

    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…

    • dani says:

      Awesome Andrew thank you! ;)

  • WebCatalyst says:

    Hi Dani,

    Excellent Post.
    Thanks for sharing.

    Keep it up.
    :)

  • diseño comunicacion visual says:

    Muy buen blog de diseño! great blog! thanks from Argentina.

  • Brian Yerkes says:

    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

  • Arsento says:

    I really like your blog and i respect your work. I’ll be a frequent visitor.

  • Tuts King says:

    Haha. Very Cool!

  • fazai38 says:

    Woot!!.. nice tips..

  • Barbara Ling, Virtual Coach says:

    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

  • Tech Frog says:

    Thanks for the tip Dani. Really a very simple and magnificent one. Will use it for my site. Thanks again :)

  • web page designer says:

    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.

    • Send Email VB says:

      Yes background color and fore color plays very important role in readablity

  • Joe says:

    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

    • Double Din Navigation says:

      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

  • Tom Jeccy says:

    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

  • Web Design Singapore says:

    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!

  • 9swords says:

    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

    • dani says:

      Thank you and thanks for tweeting! ;) and i believe it’s all the background properties shorthand style :D

  • Compute Live says:

    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

  • MIA says:

    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

    • dani says:

      You’re welcome :D and thank you Mia!

  • freeze gridview says:

    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

  • eBaylite says:

    Great tips thanks, i dont think this validates though…

  • Tom says:

    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

  • g3niuz says:

    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

  • Gus says:

    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

  • resource magazine says:

    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

  • shoaib hussain says:

    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

  • kevin john mitchell says:

    Hi Dani.Im very new to all this and this site will help me no end.Thanks for sharing with us.

  • Web Design London says:

    Great Tip. Keep doing good work like this.
    Web Design London´s last blog ..Bond Media Services

  • Ann McLaren says:

    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

  • Mat Board says:

    Very cool, I didn’t even know this was possible. Too bad it doesn’t work with IE, though, since the majority of internet users use IE. Maybe this will be fixed in IE9.

  • Maxim ???????? ?????? says:

    Great tips! However, the application is doubtful, except on some projects

  • Poster Printing says:

    Very Excellent post. Thanks for sharing it with us. But you didn’t mention why it doesn’t work in the IE??

 

High Res Textures at Go Media

Back to Top
© Copyright 2005 - 2010 Anidan Design