css删除文本阴影选择/突出显示文本（mozilla） [英] css to remove text shadow on select / highlight text (mozilla)

问题描述

我对大多数文字网站使用文字阴影，但当您突出显示/选择文字时，文字看起来模糊不清。所以为了删除文本阴影我使用这个CSS从 here 。

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;
}

问题是由于某种原因 moz选择

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

这是 jsFiddle

推荐答案

问题是由于将多个css规则（对于供应商特定的css）与:: selection伪元素结合在一起。

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 was mistaken.

So if I replace this code:

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

..使用此代码：

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

.... bingo，它工作。

.... bingo, it works.

FIDDLE

FIDDLE

支持也非常好（适用于桌面设备）： Caniuse

Support is also very good (for desktop): Caniuse

此外，如果你使用LESS或SASS - 你可以很容易地写一个mixin来绕过repitition。

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

这篇关于css删除文本阴影选择/突出显示文本（mozilla）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！