Customize Text Selection in Webflow

Use the code below to change the selection highlight color and font color on your website.

Copy Code

<style>
::selection { /* For most browsers */
  color: #000000;
  background: #00FFFF;
}

::-moz-selection { /* For Firefox */	
  color: #000000;
  background: #00FFFF;
}
</style>

If you're using Webflow, just copy and paste it in the head tag of your Webflow project in the page settings, change the hex code values to whatever works best for you, and save it.

Publish and open the live site to see the result.

Try your best to choose colors that contrast well so that your highlighted text is legible even for those who are color blind.

The safest bet is to choose black or white for the font color, and then make the highlight color something fun.

A portrait of Dalton Craighead, a Web Designer and Web Developer.

Dalton Craighead

Web Design & Development

Follow me:

More Custom Code

Lenis Smooth Scrolling for Shopify

Lenis Smooth Scrolling for Shopify

Use this code snippet to create the smooth scrolling effect on your Shopify website.

Lenis Smooth Scrolling for Webflow

Lenis Smooth Scrolling for Webflow

Use this code snippet to create the smooth scrolling effect on your Webflow website.

Lightweight CSS Animations On Scroll

Lightweight CSS Animations On Scroll

Use this JS code snippet to take full advantage of CSS animations in your Webflow project.

Thank Your Users By Name On Form Submit

Thank Your Users By Name On Form Submit

Use this code to personally thank your visitors by name when they submit a form.

Create the Typewriter Effect with JavaScript

Create the Typewriter Effect with JavaScript

Use Typer.js and data attributes to easily create the popular typewriter effect in Webflow.

Truncate Any Lines of Text with an Ellipsis

Truncate Any Lines of Text with an Ellipsis

Limit the number of text lines to simulate a preview and to keep your designs clean.

Have a project in mind?

Let's work together.