Jaroslav Dlask
2022-07-01
General

Change the Color of Highlighted Text on Your Webflow Site Using CSS

Override the default selection color to match your branding.

Jaroslav Dlask
2022-07-01

Changing the color selection of a highlighted text can have a massive impact on the look of your site. Yet it is very easy to implement using the ::selection selector in CSS.

1) Open Your Project Settings

Webflow project settings
Project settings

2) Switch to a Custom Code Tab

Custom code tab

3) Copy This Code Snippet & Paste It at the End of the <head> tag

Adding a code at the end of the <head> in your project settings will affect your entire website. This way you can make sure that the highlighted text color is the same on all pages. However, if you wish to have a different selection color on the various pages, you can override it by adding this code with different parameters to the page settings head code. Make sure you put the code in between <style> and </style> tags.



Webflow Head code
Head code

4) Edit the Color and Background Parameters

Replace the #000000 hex code to change the text color and #0050f0 for the background color. Make sure that the colors have sufficient contrast so the text remains readable. You can use this awesome tool to check the contrast. Make sure to hit the green ‘save’ button before finally publishing your changes.

General
Jaroslav Dlask
2022-07-01

More Posts

Read
How to Always Display Current Copyright Date in the Footer Using Javascript in Webflow
Read
Complete Website Design & Development Process (Step-By-Step With Images)
Read
Lazy Load Intercom on Your Webflow Site to Improve Website Loading Score