How to Change Text Selection Color in WordPress (Easily)

Published by Taran007 on

How to chage text selection color in WordPress

These Days lots of Website Developers are Trying to Create Unique Projects/Website Designs. You May Have Heard of Different Font Styles and Colors but, You Should Check out How to Change Text Selection Color in WordPress without Plugin. 

WordPress is a Highly Customizable CMS For Everyone, You Can Achieve Anything in WordPress. Today we will Show You Step by Step Guide on How to Change Text Highlight Color in WordPress.

Change Text selection color

Don’t Be Afraid, This Process Doesn’t Require Any Coding Knowledge at all. It’s Just Copy and Paste Work. If You Don’t Know About HTML Color Codes, Check out HTML Color Picker to Choose Color Easily and Get HTML Code of that Color.

1 Method: Steps to Change Text Selection Color in WordPress Manually.

1 Step: Go to WordPress Dashboard and Click on Appearances>>Edit CSS

2 Step: Copy and Paste This CSS Code into the “Additional CSS” Option.

::-moz-selection {

background-color: #ff6200;

color: #fff;

}

::selection {

background-color: #ff6200;

color: #fff;

}

3 Step: Click on Publish Changes and its Done. Simply Select Any Text and Check How it Looks and Adjust it.

Info: The ::selection selector is Mainly Used by Safari, Chrome, IE9, and Opera. On the other hand ::-moz-selection is Used by Firefox Browser. You Should Use Both Lines of Code to Let them Work Properly and on Every Browser.

Note: You Can Change Colors According to Your Website Color Scheme and Background Color.

2 Method: Best WordPress Plugin to Change Text Selection Color in WordPress

There Could be Various Plugins in WordPress to Change Text Highlight Color, We Found “Custom Highlight Color” and “Text Selection Color” Helpful and User-Friendly. The Work is Same for Manual Method and Via Plugin. We Still suggest you go with Manual Method.

3 Method: Change Text Selection Color using Style.css

1 Step: Go to the WordPress Theme Editor (Dashboard > Appearance > Editor). 

2 Step: Open Stylesheet (style.css) from many other Files.

3 Step: Copy this code given below.

::-moz-selection {

background-color: #ff6200;

color: #fff;

}

::selection {

background-color: #ff6200;

color: #fff;

}

4 Step: After Copying the Code, Paste it is into the end of the stylesheet (style.css) file. You Can Always Change Color according to your theme. 

Bonus Tips

The ::selection has three properties only to work with as Mentioned below:-

  • Color
  • background (background-color, background-image)
  • text-shadow

Best and Most Useful Part of ::selection is that You Can Disable Text-Shadow on Selection. Doing this Could Increase Your User Experience, They Could Read Clearly on Every Device. The reason is Many Times Background color can clash with text-shadow selection. You Just have set text-shadow: none; to make text easily readable and clear upon selection.

FAQ

Does Changing Default Text Selection Color Effects Website Speed or SEO?

No! This is Just a Simple Custom Design without any Drawbacks at all. You Can Use This Code on Nearly Every Website.

I Don’t Have Edit CSS Option in Appearance Tab, What Should I do now?

Go to Appearance>>Customize and Click on Additional CSS and Paste Custom CSS there. 

How to Revert these Changes?

It’s Easy, Just Remove The Pasted CSS from “Additional CSS” Option.

Wrapping up

Have You got What You Wanted? I am 100% Sure about that. Well, These Little Changes Make Your Website Unique and Popular in Many Ways. Need More Easy and Unique Styling CSS Tips and Tricks for WordPress? Like, Comment and Subscribe to real tips.


Taran007

I am A Student. Also Runs Other Website's. Plus, Social Media etc. I love to Help People For Free. If You Think i an Doing Good Work Please Subscribe to Our Website.