Bubble.io tutorials

How to Change Text Highlight Color in Bubble

May 2, 2024
bubble ui kit nocodablebubble ui kit nocodable

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.

Default text highlight
Modified text highlight

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.

This is what it looks like

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

::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 */

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).

It should look like this !


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 !

Here is our final result !

Ship your project in days, not weeks.

The most complete and diverse components library for Bubble. All you need to build on Bubble, faster then ever.
Start building
No credit card required

Latest Articles