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!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)