1. Purpose
Set a random color for the selected text and its background, if the page already has colors for the background and text that are different from the standard ones. Any solution that does not spoil anything is welcome.
2. Minimum code example
body { background: sienna; color: pink; margin: 0; font-size: 3rem; } ::selection { background: moccasin; color: lightcoral; } ::selection:window-inactive { background: moccasin; color: lightcoral; } ::-moz-selection { background: moccasin; color: lightcoral; } Не принять мне итоги, чья щемит прямота. Отречений дороги заведут в никуда. Ты — цветок Поднебесья, Ты — улыбка в ночи, эхо сладостных песен и Венеры лучи. Ты — колибри прекрасный, Амазонки сапфир, — дочь природы несчастной в звуках музыки лир. Личность мерно теряешь, изучая Тебя. Сон, еду забываешь, без сознанья Любя. He's on Codepen.io . For Firefox, it appears that the highlighted text in the inactive window is not supported.
3. Desired behavior
In the pseudo-element :: - moz-selection, the background of the selected text is rgb(255, 228, 181) , which corresponds to the color I specified moccasin . Tested in Firefox.
4. Actual behavior
But in the pseudo-element :: selection, the background of the selected text is rgb(216, 158, 096) . It turns out badly. Tested in Chrome and Opera.
If you remove the above code background: sienna; color: pink; background: sienna; color: pink; , colors for selection in Chrome and Opera are displayed normally.
But if you set the background and color properties for the body tag, then the selected colors become irregular, as if colors overlap. How to remove it, google failed.
