Code Snippet

Home » Code Snippets » CSS » Change Text Selection Color

Change Text Selection Color

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

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

Subscribe to The Thread

  1. Andrew

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

    Reply ↓
    • Chris Coyier

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

  2. Joe G.

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

    Reply ↓
    • Daniel15

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

  3. Rory McCrossan

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

    Reply ↓
  4. Steve Campbell

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

    Reply ↓
  5. srinivas

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

    Reply ↓
  6. Kevin Bartrum

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

    Reply ↓
  7. Kevin Bartrum

    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?

    Reply ↓
  8. Faizan Chughtai

    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?

    Reply ↓
    • Flaviu

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

    Please check http://dowebsitesneedtolookexactlythesameineverybrowser.com/

    Reply ↓
  10. Allan B

    How can you change the selection color for an image?

    Reply ↓
  11. kranthi

    What about in ie?

    How can i change selection background color in ie.

    Reply ↓
  12. Larry Botha

    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?

    Reply ↓
  13. Rahul.

    Great Trick.. Really useful…. tanx :)

    Reply ↓
  14. zach

    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.

    Reply ↓
  15. Imtiyaz

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

    Reply ↓
  16. MuqMan

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

    Reply ↓
  17. Muhammad Ali

    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

    Reply ↓
  18. Josh

    Also for webkit…

    
::-webkit-selection  {
       background-color: #FFA;
       color: #000;
}
    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~