Using text shadow? Don’t forget highlighting

The CSS text-shadow property is rightly popular but don’t forget this quick bit of code to avoid making it hard to read highlighted text.

The CSS text-shadow property is rightly popular but don’t forget this quick bit of code to avoid making it hard to highlight text.

I only really got round to fixing this today so I figured I’d quickly remind those of you using text-shadow properties on your own or client sites to just double check you have some styling in place for highlighted/selected text.

Fuzzy highlighting

Clear highlighting

The first shot is my own blockquote styling when highlighted. It’s because it’s got a white shadow which adds to the fuzzy appearance. By adding the following style into your css, you can sort that out.

The quick fix

::-moz-selection,
::-webkit-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}

There you go, just a small thing but one that’s easy to overlook and potentially makes it a minor annoyance to your users who highlight text.

*Yes, it’s now two times and counting I’ve accidentally overwritten my own stylesheet with an older version and not implemented my own advice *slap*

Updated per Florian’s comment below to include Firefox and Webkit declarations for completeness :)

Posted 3 years ago on · Permalink