Change highlighted text color

Community resources Product feedback
1

Anyone know how to make it so that when you highlight text the background color changes to a color I specify? For example, when you highlight text on Dribbble it changes to pink.

789×102 38.5 KB

3 Likes
2

Try add this to the head section in custom code. :slight_smile:

<style>

    ::-moz-selection { /* Firefox */
        color: #ffffff;
        background: #fa5bd3;
    }
    
    ::selection {
        color: #ffffff; 
        background: #fa5bd3;
    }
</style>
4 Likes
3

I would love to set this parameter in Webflow. I always set it for websites I design. It’s a very nice detail for visitors, a very cheap way to stand out and give the sensation that the design has been fine tuned. (ping @cyberdave)

1 Like
4

Excellent! Thanks for that. One question: does the Firefox part means it only works in Firefox?

5

@vincent I second that suggestion. It would also be nice to save the custom code as a template for future projects. @cyberdave Can you hear us? :smile:

@Jonathan
The moz-selection part is in there for compatibility with Firefox and other Gecko based browsers. The ::selection is for the other browsers.

1 Like
6

This is another one of those feature requests that are not terribly difficult to implement but add a lot of value! Apart from having more fun with designing sites, it could be useful for clarity with unique/different background colors.

2 Likes
7

I agree, a setting in the site settings would be awesome for this. Just a text highlight section that has 2 fields for hex values with a checkbox to enable would be awesome!

8

I second this request.

I’ll add it manually for now… but it would be ever so nice.

Cheers team!