DEV Community

Cover image for Changing text selection colours
Adam K Dean
Adam K Dean

Posted on

1 1

Changing text selection colours

A nice little trick to add a bit of polish to your site is changing the colour of text selection. Stockapps Blog have a nice orange colour, and of course, Si Digital have their well known Fuchsia highlighting.

You can easily implement this using the pseudo-element ::selection.

::selection {
    color: white;
    background: red;
}
Enter fullscreen mode Exit fullscreen mode

Unfortunately, Gecko requires prefixing, so you also have to add in ::moz-selection:

::moz-selection {
    color: white;
    background: red;
}
::selection {
    color: white;
    background: red;
}
Enter fullscreen mode Exit fullscreen mode

It is worth noting that this is experimental, having been dropped from the specification, so I guess you shouldn't rely on this for anything "important" just yet. Hopefully it will stick around!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post