Grow your CSS skills. Land your dream job.

Last updated on:

Change Text Selection Color

/* Mozilla based browsers */
::-moz-selection {
       background-color: #FFA;
       color: #000;
}

/* Works in Safari */
::selection {
       background-color: #FFA;
       color: #000;
}

Comments

  1. Andrew
    Permalink to comment#

    I think these snippets are a great idea, but they need better descriptions, what does the script do, provide a working example of it above the code..

  2. “provide a working example of it above the code..” is it not enough that he provides all these snippets? LoL, just kidding, I love the work that you do Chris, but I do agree with andrew. It would be helpful to see working examples, but I don’t think we can ask more of you. Love the site, keep it up.

  3. Cool tip, but is there any way to get this effect to work on the focus highlight of a select or input element?

  4. Steve Campbell

    If Chris were to be any more thorough it would be condescending, I appreciate not being treated like an asshole. Cheers!

  5. Permalink to comment#

    is there any way which will work in internet explorer also???

    • Jacob
      Permalink to comment#

      Should be able to use

      /* Mozilla based browsers */
      ::-moz-selection {
      background-color: #FF68B0;
      color: #000;
      }

      /* Works in Safari */
      ::selection {
      background-color: #FF68B0;
      color: #FFF;
      }

      /* Works in Opera */
      ::-o-selection {
      background-color: #FF68B0;
      color: #FFF;
      }
      ::-ms-selection {
      background-color: #FF68B0;
      color: #FFF;
      }

      /* Works in Internet Explorer */
      ::-webkit-selection {
      background-color: #FF68B0;
      color: #FFF;
      }

  6. Kevin Bartrum
    Permalink to comment#

    Hi Chris, your a jedi!!!!!!!!!!

    all the links on this page are snazzy!!!! I’m using the alpha theme and for the life of me can’t change the look of links!!!!! please please i’m begging you show me how to have links like yours please please i’ve tried putting all sorts of css into the custom css area nothing happens to my links…..

  7. Kevin Bartrum
    Permalink to comment#

    I’m thinking there’s something more to just adding the correct code into css area? i’ve tried everything my links still have a line and horrible background colour when hovered….frustrating OMG….is it the alpha theme in RW 4.4.2 maybe?

  8. Faizan Chughtai
    Permalink to comment#

    Hey there…
    I was just wondering that this is CSS3 and we know that CSS3 doesnt work in the current versions of IE… is there any alternate in CSS that we can create so that our website looks same in IE as well?

    Of course another solution would be to use bg’s but appart from that???

    e.g. try this website in IE6.

    You know what i mean?

    • Permalink to comment#

      Have a look to http://css3pie.com.. This will make some of the css3 features work in IE.. I succeeded just partially to make it work ob my site..

      Also http://modernizr.com offers some other useful features and fallback support for old browsers.

      Hope it helps

  9. Allan B
    Permalink to comment#

    How can you change the selection color for an image?

  10. kranthi
    Permalink to comment#

    What about in ie?

    How can i change selection background color in ie.

  11. Hi Chris,

    I’m interested as to why you’ve not included a ::selection colour in v.9 when it was used in v.8. Have your thoughts on its use changed?

  12. Permalink to comment#

    Great Trick.. Really useful…. tanx :)

  13. Permalink to comment#

    Thanks!

    It seems like that is the same color as my default browser so I felt like a fool for not seeing a change, but when I pasted it into a CSS file and played with the colors, it worked perfectly.

  14. Permalink to comment#

    Great css Tricks but the live example is missing, provide a working example of the code..

  15. I think it would work fine, you need to put the text in a div right? Thanks for the post!

  16. Could you please show us, how text change after some time(1 minutes etc), if we have 5 text paragraph we want to display these one by one

    please help me to do so

  17. Josh
    Permalink to comment#

    Also for webkit…

    
    ::-webkit-selection  {
           background-color: #FFA;
           color: #000;
    }
    
  18. This is one of the best sites in the world to learn everything css.

    Thanks for this code Chris.

  19. Olivier
    Permalink to comment#

    Thank you! It works perfectly!

  20. Rusafy
    Permalink to comment#

    i was expecting this for long. but not for changing the selection color. i have a crazy idea with it. i dont like to copy my article of my site. so i have put the background color white and text color black and make cursor as default. so when visitors going to select the text they cant see what he selected. they might think that may be it is uncopyable. they will fall in a illusion. i am so happy.
    thanks for this simple but helpful css.

  21. maxorxy
    Permalink to comment#

    @Daniel15: The selection of this site is like the ones on other sites at least in my experience. rgb(51, 153, 255)…blue!
    @css-tricks.com: Really nice site, awesome tricks! give me more!

  22. Ehwas
    Permalink to comment#

    There is one bug though.If you select some text on a page with styled selection then switch to another tab(page) and then get back to the first one the selection is no longer styled.

  23. Permalink to comment#

    Unfortunately, not working on my blog :(

  24. Sanju
    Permalink to comment#

    ::-moz-selection { background-color: #000; color: #03A8E6; } /* Works in Safari */ ::selection { background-color: #000; color: #03A8E6; } ::-webkit-selection { background-color: #FFA; color: #000; }

  25. naresh
    Permalink to comment#

    ::selection {
    background-color: #FFA;
    color: #000;
    }

  26. Jason
    Permalink to comment#

    This really adds a nice touch to a project i’m finishing up. Thank you for this!

  27. Thanks for the code. I was wondering how to change the default text selection color of my genesis theme. Luckily this tutorial caught my attention and i simply copied the code and put into CSS, Just changed the color code according to color scheme of my theme.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".