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

css, css-selectors, selection

Solution

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.

Problem

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

Original source