Custom Text Selection Colour

When users highlight text on your webpage, you have a unique opportunity to enhance the visual feedback with custom colors that match your brand. The ::selection pseudo-element allows you to style the background and text color of the selected text:

 <style> 

::selection {

background-color: #ffcc00; /* Your brand's highlight color */

color: #ffffff; /* Text color */

}

</style>

Similar Code Snippets

Balance text wrapping

‍‍Headings are crucial for grabbing attention and conveying key messages. However, unbalanced text lines can make headings less impactful. The text-wrap: balance; property helps distribute text more evenly across lines, reducing the occurrence of "widows" - a single word or short line at the end of a paragraph:

View Snippet

Pull content from another page

404 page need a collection list? Webflow told you it can't happen? We've got you covered. Use this code to pull in the nav or entire page design from another page into your 404.

View Snippet

Get class name from element

A nice little script that will return the first class applied to an element. It's part of our internal slider code, but has lots of uses when other js libraries are involved.

View Snippet

View All Snippets