Customize the text selection color with this CSS code

There are subtle details that can make a difference on your website. One of these details could be customizing the text selection color.

Learn today, with an example on a Webflow site, how to easily achieve this customization by integrating custom CSS code.

Why customize the text selection color?

- Brand consistency: By customizing the text selection color to match your brand color palette, you demonstrate attention to detail and enhance your brand's impact.

- Web accessibility: By choosing a selection color that contrasts well with the text, you improve the visibility of the selection, which can assist users with visual impairments.

- Differentiation: It's a small detail that can help your site stand out and enhance the overall perception of your website.

Understanding and Modifying CSS Code - Selection

To start, it's essential to understand what the code you integrate into your site does. So let's break down the CSS code we will be using:

1 - Customizing the text selection color

::selection {
    background-color: #FDD33C;
    color: #101010;
    -webkit-text-fill-color: #101010;
}

The code above determines the text selection color for most web browsers. ::selection is the pseudo-element used to style the portion of text that has been selected by a user. background-color: #FDD33C; defines the background color of the selection (in this case, a bright yellow), and color: #101010; defines the color of the selected text (in this case, a very dark black). -webkit-text-fill-color: #101010; is a Webkit-specific property that also defines the text color, to ensure the style applies correctly across all Webkit-based browsers.

Summary:

• ::selection : allows you to set the styles for the selection of all content on a web page
• ::-moz-selection : allows you to set the styles for the selection of all content on a web page, specific to Mozilla Firefox
• ::-webkit-selection : allows you to set the styles for the selection of all content on a web page, specific to Chrome and Safari

2 - Browser compatibility

::-moz-selection {
    background-color: #FDD33C;
    color: #101010;
    -webkit-text-fill-color: #101010;
}

::-webkit-selection {
    background-color: #FDD33C;
    color: #101010;
    -webkit-text-fill-color: #101010;
}

The code blocks above are essentially the same as the previous one, but they are necessary to ensure compatibility with all browsers. ::-moz-selection is for Firefox, and ::-webkit-selection is for Webkit-based browsers.

3 - How to modify (and customize) this CSS code?

If you wish to change the colors, you can simply replace the hexadecimal values (#FDD33C and #101010 in our example) with colors of your choice.

If needed, you will find numerous online tools, such as Figma, to help you choose hexadecimal color values.

How to integrate this CSS code into your Webflow site?

1. Copy the CSS code

⚠️ Make sure to add it between CSS "Style" tags

2. Access your Webflow site

Log in to your Webflow account and select the project where you want to integrate the custom code. Go directly to "Site settings".

3. Add the CSS code

Once in your Webflow interface, click on the "Settings" button for the project, then on the "Custom Code" tab. Paste the CSS code into the "Head Code" section and remember to save your changes.

4. Publish the changes

Publish your site.

And there you have it, you've succeeded! Now, when you or your users highlight text on your site, it will be highlighted in the color of your choice (#FDD33C in this case), with text in #101010.

The limits of customizing selection

It's important to note that browsers may have different implementations for text selection, which can limit the possible customization with CSS properties. Therefore, it’s essential to test the customization on various browsers to ensure that the desired appearance is correctly displayed for users.

Additionally, care should also be taken regarding the web accessibility of your customization. The text color should stand out from the background color, for instance. Learn more about web accessibility.

Customizing the text selection on a website can be an effective way to enhance the user experience and create a cohesive design. By using CSS properties, you can easily define the background color and typography color for the selection, creating a tailored design for your website.

Conclusion

Customizing the text selection color on your website is not just a matter of style; it’s also about branding, user experience, and accessibility. It is a subtle demonstration of your attention to detail that can profoundly impact how users perceive your site.

So don't hesitate to try this CSS code on your Webflow site. You might be pleasantly surprised by the difference it can make. And remember, beauty often lies in the details!

To discover more tips on Web design:

→ Visit our YouTube channel