Customize the text selection color with this CSS code

There are subtle details that can make all the difference to your website. One such detail could be customizing the color of the text selection.

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

Why customize the text selection color?

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

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

- Differentiation: This is a small detail that can help your site stand out from the crowd and improve the overall perception of your site.

Understanding and Modifying CSS Code - Selection

To begin with, it's essential to understand what the code you're integrating into your site does. So let's decipher the CSS code we'll be using:

1 - Customize text selection color

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

The above code determines the color of the text selection for most web browsers. ::selection is the pseudo-element used to style the part of the 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 sets the text color, to ensure that the style is applied correctly in all Webkit-based browsers.

Summary:

• ::selection: allows to define styles for the selection of all the content in a web page
• ::-moz-selection: allows to define styles for the selection of all content in a web page, specific for Mozilla Firefox
• ::-webkit-selection: allows to define styles for the selection of all the content in a web page, specific for 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 above code blocks are essentially the same as the previous one, but are necessary to ensure compatibility with all browsers. ::-moz-selection is for Firefox, and ::-webkit-selection is for Webkit-based browsers.

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

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

If required, you'll find a number of online tools, such as Figma, to help you choose hexadecimal color values.

How do you integrate this CSS code into your Webflow site?

1. Copy the CSS code

⚠️ Remember to add it between CSS "Style" tags

2. Access your Webflow site

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

3. Add CSS code

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

4. Publish changes

Publish your site.

And there you have it! Now, when you or your users select 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 selection customization

It is important to note that browsers may have different implementations for text selection, which may limit the customization possible with CSS properties. It is therefore important to test the customization on different browsers to ensure that the desired appearance is correctly displayed for users.

In addition, you should also pay attention to theweb accessibility of your personalization. For example, the color of the text must be different from the background color. Learn more aboutweb accessibility.

Customizing the text selection on a website can be an effective way to improve the user experience and create a consistent design. Using CSS properties, you can easily set the background color and typography color for the selection, creating a custom design for your website.

Conclusion

Customizing the text selection color on your website isn't just about style, it's also about branding, user experience and accessibility. It's a subtle demonstration of your attention to detail that can have a profound impact on how users perceive your site.

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

For more Webdesign tips :

→ Go directly to our YouTube channel