Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Change the Default Text Selection Color in WordPress

Last updated on by
Follow WPBeginner on YouTube
How to Change the Default Text Selection Color in WordPress

You know what makes your website’s design stand out? Attention to details. One of these details that caught our attention on Brian Gardner’s (@bgardner) website was the way his default text selection color matched his design color scheme rather than being the default blue color. In this article, we will show you how to change the default text selection color in your WordPress theme.

Change the Default Text Selection Color

Open your style.css file and add the following styles:

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}

::selection {
    background-color: #ff6200;
    color: #fff;
}

Don’t forget to change the background color to match your theme’s color scheme.

The ::selection selector is used by Chrome, Safari, IE9+, and Opera. Firefox likes to use their own ::-moz-selection. This is the reason why they are on two separate lines. If you try to combine them, it will not work.

For demo, simply select any of the text on this site.

Source: Brian Gardner


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Michele says:

    I tried this but it didn’t work… I’m using Thesis, does that make a difference?

    • Editorial Staff says:

      Not that we know of because it is a basic CSS change. The only thing we can think of is that thesis is overriding your styles maybe?

  2. Marvin says:

    Hello there,

    I just copied your code in my Genesis eleven40 child theme but it is not working.

    Thank You

    • Editorial Staff says:

      It should work just fine unless eleven40 has it’s own styles pre-defined. In which case you would need to override them by adding an !important value in yours.

      • Lauren says:

        Oh my gosh. I have been searching tirelessly all over the internet for the solution to this problem, but to no avail. But this response to Marvin’s question solved it! So simple. Thanks so much!!!!!

  3. David Abramson says:

    Cool trick. I am working on a website in Genesis and like my tech support guy says, “it’s as easy as drinking a glass of water”

    Thanks!
    -David

  4. Brad Dalton says:

    Chris Coyier posted this on css-tricks.com back in 2009 http://css-tricks.com/snippets/css/change-text-selection-color/

    • Editorial Staff says:

      Ah well, didn’t know about it until we saw it on Brian’s site.

      • Keith Davis says:

        Yes I saw it on Brian Gardner’s site.
        Never knew you could change the selection colours until I read his article.
        Not sure if I would ever use it, but nice to know it can be done.

  5. Josh McCarty says:

    This is one of those simple things that many people probably won’t notice, but it’s a nice “extra” to add to a website. I first saw it in HTML5 Boilerplate and use it frequently on sites that I build.

  6. bungeshea says:

    You actually can combine them, like this:

    ::selection,
    ::-moz-selection {
    background-color: #ff6200;
    color: #fff;
    }

    • Editorial Staff says:

      We saw this tutorial on Brian’s site. He suggests that combining them will not work (not sure which environment it was not working). But we’d stick with what we know works.

  7. Clean Digital says:

    Nice post. Just updated our site with a nice red background! Cheers!

  8. Gautam Doddamani says:

    genesis has a nice text selection color. your site’s is orange which is cool :)

    p.s. speaking about site appearances, yoast.com got an upgrade too, he is also now using the genesis framework kudos to that!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.