How to Change Your Website’s Text Selection Color in WordPress

Are you looking for a way to change your website’s text selection color in WordPress? Web developers spend countless hours on their website design. Making sure that every color goes together, every navigation menu looks great, every widget is placed properly, and so much more goes into website design. However, when it’s all done, you’re left with a website that looks great and catches visitors’ attention.

One of the most overlooked design changes that you can make is editing the default text selection color in WordPress. When a visitor highlights text on your website, by default, it will be highlighted in blue. This does not look good on every website. Today, I will demonstrate how to change your website’s text selection color in WordPress using CSS.

Why Change the Text Selection Color in WordPress

If you’re willing to spend 40+ hours designing your website from scratch to be everything you envisioned, changing the text selection color is a no-brainer. Making your website everything it can be is a web developer’s job and the last thing you want is for the default text selection color to look bad on your website.

For example, in our case, we use the “Green” in GreenGeeks as our text selection color. It sends a clear message that we are an environmentally friendly web host and the color Green makes that clear. While this does not work for every website, making sure your text selection color matches the rest of your website helps.

Just keep in mind that you need to make sure that your text selection color is visible. For example, if we had a green background color, a green text selection color would not work. It needs to stand out from the rest of the website so that visitors know what they are highlighting, but it also needs to look good.

How to Change Your Website’s Text Selection Color in WordPress

Today, I will demonstrate how to change your website’s text selection color in WordPress using CSS. As with most color options in WordPress, using CSS code to change them is the quickest and easiest way to do it. You will not need any prior coding experience as it just involves copying and pasting a few lines of code and adding the color code of your choice in the appropriate space.

If you are not sure what the HTML color codes looks like or want to easily sample colors, check out the HTML Color Codes website. This will let you sample all of the colors possible and provide the color codes.

Changing the Text Selection Color in WordPress

The process of adding custom CSS to WordPress is very simple. On the left-hand admin panel, click on Appearance and select the Customize option.

Click on Appearance and select the Customize option.

Click on the Additional CSS option.

Click on the Additional CSS option.

Now you need to copy and paste the following lines of code into the text editor:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]::-moz-selection {
background-color: #FA0000;
color: #fff;
}

::selection {
background-color: #FA0000;
color: #fff;
}[/ht_message]

This will make your text selection color red. To change it, change the “FA0000” color code to the one you want. Once the code is placed, you can highlight some text to see it. Make sure the text selection color is visible with all of the background colors on your website.

Highlight text to check the results.

Once you have found the color you like and that is visible, click on the “Publish” button to save and apply the changes to your website.

Click on the "Publish" button.

Congratulations, you have successfully changed the text selection color in WordPress. You can change this at any time by repeating these steps. If you would like to return it to the default selection color, simply delete the CSS lines you added.

All Details Matter in Web Design

No matter how small or obscure a detail is, customizing it to make your website look as good as possible is necessary for success. Having a great looking and functioning website is no easy feat, but you need one to compete with other websites. There are millions of websites and there are probably hundreds that offer similar content.

Competing with so many websites around is hard and is the reason why many new websites do not succeed. Standing out from the competition with an excellent design will give your content a better chance in this crowded environment.

What color have you picked for your text selection? Why have you picked this color?

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copy link