How to Change Text Highlight Color in Bubble

You know the expression "The devil is in the details" right?

Well, this is especially true for Front-End Design.

And Bubble is no exception to this.

In this article, you'll learn how to modify the text highlight of a Bubble app for free, and without any plugin.

To go further, you can also read our article on how to create a text gradient in Bubble.

Step 1 : Adding some CSS Code

The one and only step to change the text highlight of your Bubble apps is to paste some simple CSS Code into your app's header.

To do this, simply go to Settings --> SEO/Metatags and location the "Script/meta tags in header" section.

In this section, you'll need to paste this code (you can copy/paste it directly) :

<style>
::selection { 
    background: #YOUR-COLOR; /* Background color for text selection */ 
    color: #YOUR-COLOR; /* Text color for text selection */
}
::-moz-selection { 
        background: #YOUR-COLOR; /* Background color for text selection in Firefox */ 
        color: #YOUR-COLOR; /* Text color for text selection in Firefox */
    }
</style>

In short, this CSS Code simply modifies the Background and Text color of the text currently selected.

To personalize it to your colors, simply modify the YOUR-COLOR placeholder in the code (with hexadecimal code).

Conclusion

You're all set, now you simply have to hit preview to see the result !

Since we've this into the header of our apps, it will be applied on every page of your apps.

But if you want to show only on on page, you can simply remove the code from the previous section, and paste it into the page header instead !