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
Elegant Themes
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 lovers 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 »
  • Michele

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

    • http://www.wpbeginner.com Editorial Staff

      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?

  • Marvin

    Hello there,

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

    Thank You

    • http://www.wpbeginner.com Editorial Staff

      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.

  • David Abramson

    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

  • Brad Dalton

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

    • http://www.wpbeginner.com Editorial Staff

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

      • http://www.facebook.com/profile.php?id=100003862505833 Keith Davis

        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.

  • Josh McCarty

    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.

  • http://twitter.com/bungeshea bungeshea

    You actually can combine them, like this:

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

    • http://www.wpbeginner.com Editorial Staff

      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.

  • http://twitter.com/clean_digital Clean Digital

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

  • Gautam Doddamani

    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!

    • http://www.wpbeginner.com Editorial Staff

      Yup, Genesis is a very good framework to build your site on.