How to change the default text selection color in WordPress

Share this

Posted by on

You can easily change the default text selection color in WordPress if you’re reading this article. There are many ways to impress your visitors from which one is layout design of your theme. WordPress is full of editing and trying new designs, colors and layout. I always keep experimenting with my WordPress theme, do you ?

Using shortcodes, sliders, widgets, social media icons creates a special attention of your website. You know, you can easily change the default text selection color in your WordPress theme. Recently, I looked that WPbeginner has an orange text selection color while ShoutMeLoud has the black one, I thought that can I change it too ? 5 minutes of searching and then finally I got the tutorial on w3schools to change the default text selection color on HTML and other websites. It is really very easy. You just have to paste the CSS string in your WordPress theme’s “style.css” file. Paste it in the end for better editing (modification). Follow the Steps given below..

Method 1

  • STEP 1 : Open your theme’s editor (Go to WordPress dashboard > Appearance > editor). You will see the bunch of codes labeled as Stylesheet (style.css).
  • STEP 2 : Copy this code given below.
  • STEP 3 : Paste the code into the end of your stylesheet (style.css) file. Don’t forget to replace the #990000 with your theme color. It is my theme color. You can try it by selecting my text. You can use any of the color using the hexadecimal color codes. It looks cool on mobile devices too. See the screenshot given below.
change the default text selection color

Mine appears red change the default text selection color

The colors are the main part of the website designing. Using the perfect color attracts more visitors to your website. The text selection color of any website or browser is sky-blue by default. You can change it easily using the above method.

Method 2

For those who are not familiar with coding or CSS code editing here’s something for you >> Text Selection Color

Text Selection Color plugin helps to change the color of the selected text on your WordPress website.

Main Features:

  • Using this plugin you can change text color and text background color after the selection of the texts in the Browsers.
  • Users can also preview the changes made by the plugin on the settings page itself.

Using this plugin non-coders can easily change the default text selection color in WordPress from sky-blue to any awesome hue (color) they want.

In the CSS code mentioned above, the class -moz-selection helps to change the text selection color in Mozilla browsers (firefox). The class ::selection helps to change the colors in Google chrome, Opera, Internet Explorer, Safari browser (apple). You cannot combine both the CSS strings as Firefox uses its own ::-moz-selection. (It will not work if you will try to combine them)

change the default text selection color in WordPress

Last updated: April 17, 2016

Authored by :

Hi ! I'm Prakhar Shrivastav, currently a final year BSc student and a co-founder of 3nions. I love spending quality times on Web development, Graphic designing, and SEO.


Hey Prakhar,

Actually default color is good than others.

Yes it is, but sometimes you get bored with constant things. So you can try different colors in different places. It’s all up to you! 🙂


Really the default text colors matters for highlighting. Thanks for the tuts.


Ganesamoorthi M

Really it was good. Useful for my site. Thanks for sharing.

Leave a Reply