web-dev-qa-db-ja.com

cssでテキストの選択/ハイライトのテキストシャドウを削除（mozilla）

ほとんどのテキストサイト全体にテキストシャドウを使用していますが、テキストをハイライト/選択すると、テキストがぼやけて見えます。したがって、テキストシャドウを削除するには、このcssを here から使用します。

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

問題は、何らかの理由でmoz-selectionはMozilla（Firefox）では動作しません（もう？）。

これが jsFiddle です

css-selectorsselectioncss
13
Danield

問題は、複数のcssルール（ベンダー固有のcss）を:: selection疑似要素と組み合わせてグループ化したことが原因であると思われます。

最初は、各ステートメントを別々の行に書くだけで十分だと思っていました。

間違えた。

だから私がこのコードを置き換えると：

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

....ビンゴ、動作します。

[〜＃〜] fiddle [〜＃〜]

サポートも非常に優れています（デスクトップの場合）： Caniuse

また、LESSまたはSASSを使用する場合、ミックスインを簡単に記述して、繰り返しを回避できます。

28
Danield

次の Mozilla Developer Networkに文書化されています ：

この疑似要素はCSSセレクターレベル3のドラフトに含まれていましたが、特に入れ子になった要素では動作が指定されておらず、相互運用性が達成されていないようだったため、候補の推奨フェーズで削除されました（相互運用性は達成されていません） W3Cスタイルのメーリングリスト）。

:: selection疑似要素は現在、標準トラックのCSSモジュールにはありません。本番環境では使用しないでください。

6
initall