8

CSS 疑似要素を使用して、Web サイトの選択色を変更しようとしてい ::selectionます。

この jsFiddleに見られるように、テキストは選択時に完全に黒の背景色になるはずです。Firefox では、これが当てはまります。

ただし、Chrome では、色は完全な黒ではありません。Chrome が私の色をいじっているようです。

を選択しているときにテキストを黒のままにしておくと、これを見ることができます。Firefox では非表示になりますが、Chrome では引き続き表示されます。

私が使用していた他の背景色にこの影響があることに気付きました.Chromeでは常に少しずれていました. 少し赤みが加わった感じです。

Chrome で必要な本来の色を取得するにはどうすればよいですか?

4

3 に答える 3

13

おそらくあなたがやろうとしていることを正確に防ぐために、選択範囲の背景色の不透明度が1の場合、Chromeは変更するようbackground-color: rgba(0,0,0,.99)です。

http://jsfiddle.net/ExplosionPIlls/a3gfR/5/

于 2013-02-20T01:49:04.330 に答える
3

上記の提案を使用している場合でも、Firefoxは画像を選択すると明るい青色で表示されます。

次のコードでそれを取り除くことができました：

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

画像は選択によって無視されるようになりました。

したがって、このコードを適用することで、すべてのブラウザーでより統一された外観を得ることができました。

*::selection {
    /* WebKit/Blink Browsers */
    background-color: rgba(0,0,0,.99); /* black */
    color: #ffffff; /* white */
}

*::-moz-selection {
    /* Gecko Browsers */
    background: #000000; /* black */
    color: #ffffff; /* white */
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
于 2016-03-08T09:59:49.027 に答える
1

別の回答で述べたように、使用できる最も近い値は about0.996です。

また、不透明度を低くしてimg::selection、Chrome で画像が完全に隠れないようにします。

そのようです：

::-moz-selection { background: rgba(255, 127, 127, 1); }
::selection { background: rgba(255, 127, 127, 0.996); }
img::selection { background: rgba(255, 127, 127, 0.8); }
于 2015-04-02T15:29:47.310 に答える