Skip to content
Change Text Selection Color

Change Text Selection Color

Another way to make our website unique is by changing the selection color, it’s a small change but can be used to highlight our brand colors. The default is a blue background with white for the font color and it can be changed easily.

Selection Color Code Code

::selection { /*chrome and others*/
  color: #ffffff;
  background: #ff0000;
}

::-moz-selection { /* Code for Firefox */
  color: #ffffff;
  background: #ff0000;
}

We have used the red color here don’t forget to change it.

Pick your desired color [color picker]

How & Where does this work

  • Works both in mobile, desktop almost all devices
  • The first line of code works in Chrome, Opera, IE9+, and Safari
  • The second line of code for Firefox [most used after Chrome]

How to use this in WordPress

  • Click on CUSTOMIZE
  • Open the Additional CSS option
  • Add the above lines of code and you\’re done.

Pro – Tip: Select the color combination appropriately to ensure brand colors as well as text-readability.

Conclusion

Also, Read How to change the Address Bar Color

This is a simple yet very colorful implementation what do you think? Read more such Web Development tricks from me at matrixread.com/webdev

Tags: