css to remove text shadow on select / highlight text (mozilla)

Question

I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.

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

The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).

Here's the jsFiddle

Answer 1

It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.

I originally thought that it was sufficient to write each statement on a separate line.

I was mistaken.

So if I replace this code:

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

..With this code:

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

.... bingo, it works.

FIDDLE

Support is also very good (for desktop): Caniuse

Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.