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. User Avatar
    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..

    • User Avatar
      Chris Coyier
      Permalink to comment#

      This entire website, at the time of this writing anyway, is an example of the above.

  2. User Avatar
    Joe G.
    Permalink to comment#

    “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.

    • User Avatar
      Daniel15
      Permalink to comment#

      Select any text on this site. Notice the selection colour is not blue. :P

  3. User Avatar
    Rory McCrossan
    Permalink to comment#

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

  4. User Avatar
    Steve Campbell

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

  5. User Avatar
    srinivas
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    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?

    • User Avatar
      Flaviu
      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. User Avatar
    Allan B
    Permalink to comment#

    How can you change the selection color for an image?

  10. User Avatar
    kranthi
    Permalink to comment#

    What about in ie?

    How can i change selection background color in ie.

  11. User Avatar
    Larry Botha
    Permalink to comment#

    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. User Avatar
    Rahul.
    Permalink to comment#

    Great Trick.. Really useful…. tanx :)

  13. User Avatar
    zach
    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. User Avatar
    Imtiyaz
    Permalink to comment#

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

  15. User Avatar
    MuqMan
    Permalink to comment#

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

  16. User Avatar
    Muhammad Ali
    Permalink to comment#

    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. User Avatar
    Josh
    Permalink to comment#

    Also for webkit…

    
    ::-webkit-selection  {
           background-color: #FFA;
           color: #000;
    }
    
  18. User Avatar
    Brad Dalton
    Permalink to comment#

    This is one of the best sites in the world to learn everything css.

    Thanks for this code Chris.

  19. User Avatar
    Olivier
    Permalink to comment#

    Thank you! It works perfectly!

  20. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Rysmah
    Permalink to comment#

    Unfortunately, not working on my blog :(

  24. User Avatar
    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. User Avatar
    naresh
    Permalink to comment#

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

  26. User Avatar
    Jason
    Permalink to comment#

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

  27. User Avatar
    SarahBennetMills
    Permalink to comment#

    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.

  28. User Avatar
    pj
    Permalink to comment#

    ::selection {
    background-color: #gray;
    color: #ffffff;
    }

  29. User Avatar
    Natalia
    Permalink to comment#

    hey, is it possible to write ::selection in one place (i.e. body or html tag ) and add that specification to whole site? or its necessary to list all elements on site and to each element add ::selection? well it would be easier to add it in one place instead of listing all . what you thnk?

  30. User Avatar
    Dumbone
    Permalink to comment#

    how does it work with a font change

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag