Lytbox Academy Logo
Lytbox Academy Logo

How to Change Highlighted Text Colors On Elementor & WordPress Websites

Article Outline

Learn to easily change the selected highlighted text color on your WordPress and Elementor websites.

What is Highlighted Text On Elementor and WordPress Websites?

We all see it and use it most of the time when on a computer, especially when we are copying and pasting text.  Anytime we click the mouse and drag it over the text, almost all the time we see a light blue color to indicate which text is selected.

What if I told you it is super easy to change this bland light blue color into something more creative and choose any color we want for our websites? Well, it is. It’s kind of ridiculously easy.

Styling up the highlighted text on your website is a great way to make your site stand out and give that special touch that gives your viewers a better experience.

How to Change Selected Highlighted Text Color with CSS

This is a super easy and fast tutorial. It should take you only a couple of minutes to complete.

Step 1: Navigate to Customizer

First, make sure you are logged in and can see the top toolbar. From there select “Customizer”. After you select customizer then select “Additional CSS”. This is where I suggest adding the snippet of CSS you’ll need for changing the colors.

Step 2: Add a CSS Snippet

Copy and paste the CSS snippet below in the “Additional CSS” section.

::selection {
      background: #FFCD85;
      color: #000;
}

Step 3: Adjust the Color of the Text

To change the color of the text simply change the color code (currently #000) and add the color code for the color you would like your text when it’s highlighted. If you are unfamiliar with CSS it’s ok. Just make sure to keep the : and ; in the same locations as the starter code.

Step 4: Adjust the Color of the Background

To change the background color is straightforward and the same as the text color.

What Colors to Use For Highlighted Text

Here are two suggestions I would give for selecting the colors to use for a custom-styled highlighted text.

Use your brand colors

Stick to your and your site’s brand and style colors. This will keep the style inline and keep the design consistent.

Keep it readable for accessibility

We already want to keep the user in mind. Make sure to keep the text readable when it’s highlighted and this includes really small text. Keep in mind, some devices can be old and not have the best displays. Make sure to either use a light background with dark text or vice versa, a dark background with light text. The more contrast, the better.

Changing Highlighted Text Colors On Elementor & WordPress Websites Video Tutorial

I hope this super simple and fast tutorial and web design trick helps was useful, and you’re able to give an extra special touch to your website. You can check out the video tutorial to learn more and get a visual overview. Thanks!

YouTube video

Join the Lytbox Newsletter

Blog Page Sign Up
Comments have been temporarily deactivated and are in the process of being revamped for a far better user experience and support for tutorials.
Join the Lytbox Newsletter
Blog Page Sign Up
Lytbox Academy Logo

Reset your passord

Want to login? Click here.
Lytbox Academy Logo

Log in to your account

Forgot your password? Reset here.