Change The Default Text Selection Highlight Color In WordPress

How To Change The Default Text Selection Highlight Color In WordPress?

Colors matters the most when it comes to web design. In order to catch and attract visitor’s eyes your site color and design should be outstanding as well as unique than others. One thing that comes by default and can be seen mostly on all sites is the text selection highlight color which is sky blue.

Giving a little detail to the text selection highlight color by matching it to your theme will really attract your visitors. Here we will see how to change the default text selection highlight color in wordpress.

Some wordpress theme has the option to override this default text selection highlight color in order to match your theme. For those who don’t have this option you can change the default text selection color by adding a simple CSS trick.

Change The Default Text Selection Highlight Color In WordPress

Change Default Text Selection Highlight Color In WordpPess

Login to your wordpress dashboard and go to appearance >> editor and add the following CSS in stylesheet (style.css) and update file. If your theme supports custom CSS then add the following CSS in your theme custom CSS field. Save changes and now select a portion of text in your site and see the selected text highlight color.

/*** Works on common browsers ***/
::selection {
          background-color: #352e7e;
          color: #fff;
}
/*** Mozilla based browsers ***/
::-moz-selection {
         background-color: #352e7e;
         color: #fff;
}
/***For Other Browsers ***/
::-o-selection {
        background-color: #352e7e;
        color: #fff;
}
::-ms-selection {
       background-color: #352e7e;
       color: #fff;
}
/*** For Webkit ***/
::-webkit-selection {
       background-color: #352e7e;
       color: #fff;
}

Remember:- This CSS works on all browsers and never combine the above CSS in which you won’t see the results.

Using Color Codes

The above CSS has a color code that matches this site. Make sure you change the color codes to match you sites color scheme. Also make the selected text highlight color contrast so that the text looks clear and visitors don’t get confused. You can use eye dropper tool or ColorPicker to grab your color codes.

I hope this article helped you a lot on how to change the default text selection highlight color in WordPress. Please make sure to share it to your friends and comment below.