Change default highlight / text selection color in WordPress

In WordPress, the highlight / text selection color mainly depends on the theme which you have selected for your website. At times, we don’t like what we are looking at and obviously make changes accordingly. In this article, we would discuss how to change default text selection color in WordPress. The default text selection color is blue in most of the themes. But, we can choose one of our own choice. To make the required changes all we need to do is make relevant modifications in Cascading Style Sheets (CSS) file. The CSS file describes how various elements on our web page are rendered.

Change default highlight / text selection color in WordPress

We need to locate the .css file for the theme we have used for our website. In most of the cases, it is style.css or main.css. Once you have identified your default CSS file, you need to locate the following entries –

::-moz-selection {
               color: white;
               background: green;
          }

::selection {
               color: white;
               background: green;
          }

The color combinations in the above code would be different for you. All you need to do is make the necessary modifications as per your requirements to color: and background: entries. For best results, you can use hexadecimal values. The hexadecimal values for colors are supported by all the internet browsers. In case, we would like to provide the hexadecimal value of color RED then it would be #FF0000. Now, we will discuss the above mentioned code a bit.

::-moz-selection selector is for the Firefox browser and ::selection is for other browsers like Chrome, Opera, Internet Explorer and Safari. The syntax for the above code is –

::-moz-selection {
               declarations;
          }

::selection {
               declarations;
          }

Although, you can make necessary modifications as required by editing the source files yourself. But, for those who are not comfortable with above operations can try to make changes through options available through WordPress’ dashboard. If your theme permits you to make required changes then you can do so by customizing your theme. The option is available under – Appearance >> Customize in the Admin Menu of your WordPress dashboard.

In conclusion, we have discussed how to change default highlight / text selection color in WordPress.

Similar Posts