Why Selection Styling Matters

Text highlighting is a native browser interaction that users encounter constantly while reading content, copying information, or navigating long-form pages.

By default, browsers apply their own selection colors, which often feel disconnected from the rest of the interface. On carefully designed websites, this can interrupt the visual consistency of the experience.

Custom selection styling helps extend a brand’s design system into smaller interaction states that are normally ignored. While subtle, these details contribute to a site feeling more complete and intentional.

For dark interfaces especially, softer neutral highlights often feel more refined than the default system blue.

Adding Custom CSS in Framer

In Framer, selection styling can be added globally using an Embed component or through custom code in the site settings.

The implementation itself is extremely lightweight and only requires a few lines of CSS:

<style>
::selection {
color: #121212; /*selection text color*/
background: #E3E2DA; /*selection background color*/
}
</style>

<style>::selection {    color: #121212;    background: #E3E2DA;}</style>

<style>::selection {    color: #121212;    background: #E3E2DA;}</style>

<style>::selection {    color: #121212;    background: #E3E2DA;}</style>

<style>::selection {    color: #121212;    background: #E3E2DA;}</style>

Once applied, every selectable text element across the site automatically inherits the new highlight styling.

This includes:

• Paragraph text

• Headlines

• Navigation items

• CMS content

• Blog articles

Because the styling is global, it creates a more unified experience throughout the entire project without requiring additional setup.

Final Thoughts

Custom text selection styling is a small enhancement, but it contributes significantly to the perceived quality of a website.

These details help browser interactions feel connected to the rest of the interface while reinforcing the overall design system. In Framer, implementing this behavior is fast, lightweight, and easy to maintain across larger projects.

When combined with strong typography and thoughtful spacing, subtle interaction refinements like this help create a more polished browsing experience from beginning to end.

request = conset.get_request()
# Auto-approve short-duration requests with a ticket number
if request.requested_duration_minutes and request.requested_duration_minutes <= custom_fields.get("ticket_number"):
    if ticket:
        actions.approve("Auto-approved: " + ticket)
    else:
        actions.comment("Short request, but missing ticket number")
else:
    actions.comment("Requires manual review: duration exceeds threshold")