Cool Highlight Text Color with CSS Selection

March 8, 2009 at 9:14 am | Tech Support | 15 comments

CSS Selection

CSS Selection

Google still has that "beginning of the Internet look". I mean, blue links. For a while this was common for all website links to be blue; now with CSS we can change the color of links and rollover effects.

The time has come to change the colors of the text and background when you are selecting text

In most websites when you highlight some text, you will get a background color of blue with white text. How boring !  :~D

On my site when you highlight text, the background color will not change but the text will turn blue. I had seen this on other blogs and started searching the Internet for the answer. So here it is, I hope that everyone will start changing from the default look to something a little cooler..

How to Change your Highlight Text using CSS

Just add the following code to your sites CSS sheet. Change the COLOR to the color you want for your text and change the BACKGROUND to the color you want for the background, pretty simple…

The second part of the CSS is for your CODE (<code> and </code>) tags. Select this paragraph and see what I the following code will do

::-moz-selection{ background: #fff; color: #2D83D5; }
::selection { background: #fff; color: #2D83D5; }
code::-moz-selection { background: #333; color: #fff; }
code::selection { background: #333; color: #fff; }

You have to use -moz in front in order to get Firefox to work properly, unfortunately IE sucks and doesn’t support this.

Online Color Selector Check out this site for a quick way to get the code for the colors you want to use.

Source: Thanks to this site for the answer!

Photo Source: http://www.flickr.com/photos/geirarne/ / CC BY 2.0

15 Responses to “Cool Highlight Text Color with CSS Selection”

  1. Jake Woods says:
    March 9, 2009 at 8:27 am

    Sweet! I always wondered how this was done…

    Reply
  2. Marc says:
    March 9, 2009 at 9:02 am

    “Beginning of the internet”… I just can't find it in my settings… help please? ;)

    Reply
  3. Christopher Hennis says:
    March 10, 2009 at 1:40 pm

    I would personally search for a JavaScript method to do this if you're nervous about using CSS Level 3.0 for web validation type reasons.

    Good post.

    Reply
  4. thejimgaudet says:
    March 10, 2009 at 2:15 pm

    Chris, have you found a javascript method yet? I would be interested.

    Reply
  5. don't email me says:
    March 29, 2009 at 9:42 am

    what's the CSS sheet?

    Reply
  6. thejimgaudet says:
    March 30, 2009 at 5:54 pm

    Not sure if this is real or not, but there is no link so probably not spam.

    Go here;

    http://en.wikipedia.org/wiki/Cascading_Style_Sh...

    Reply
  7. Meighen says:
    January 30, 2010 at 2:47 pm

    Why does your page’s red paragraph work in IE8? On the site you give thanks to for the answer, nowhere on the page does the highlighting work in IE8. On yours, only your red paragraph does. This excites me. Yet in your source code, I don’t see anything special about it except that it’s red! *confused yet hopeful*

    Reply
    • Jim Gaudet says:
      January 31, 2010 at 7:39 am

      Hello Meighen,

      Thanks for stopping by and making me go crazy. Let me first say that I am sorry you are using IE! Now that’s out of the way let’s talk about this cool feature that IE doesn’t support, and well was removed from the current CSS3 draft. I will be writing a new article on this subject, thanks BTW. This is what I have discovered after you pointed this out to me;

      The red line is just a span tag using the color ef2a0f
      I noticed that if I changed the color to anything as long as I kept the E in the beginning it would work and changing the E to anything else (obviously I have tried every color, but I did do a lot!) wouldn’t work.

      For this, IE is fucking weird! I am going to try and find a way to cure this, even though I hate IE

      I am really bad with colors, but if I can find a decent color that will work on all text, then I can have a workaround for it… We’ll see.

      Thanks again and of course NOW I am just seeing your second message…

      Reply
  8. Meighen says:
    January 30, 2010 at 3:26 pm

    Oh OK, I get it. Certain colors reverse the highlight automatically (blue text, white background instead of blue background, white text). #ef2a0f (the red you use on that span) is one of them. :)

    Reply

Leave a Reply