如何重置 ::selection 的背景颜色

Question

/* Site */
::-webkit-selection {
  background-color: @highlightBackground;
  color: @highlightColor;
}
::-moz-selection {
  background-color: @highlightBackground;
  color: @highlightColor;
}
::selection {
  background-color: @highlightBackground;
  color: @highlightColor;
}

我正在使用 semantic-ui 作为 css 框架，我今天一直在重写它的值。我遇到了默认情况下被覆盖的选择选项，我想将其设置为计算机默认值。正如你们中的一些人所知，您可以在 macbook 中更改选择颜色，所以我希望我的用户使用计算机的默认选择颜色。

那么，我该怎么办？我试过 inherit 和 transparent 但它们不起作用。

Answer 1

解决方案是使用系统颜色 highlight 作为背景，highlighttext 作为前景。

inherit 之类的颜色将不起作用，因为 inherit 表示 "use the same color as the parent element"。这不是我们想要的！

第一个示例将选择颜色设置为棕底黄，以模拟框架主题。只是为了确保更改这些颜色完全有效。

/* colours from theme */
::-webkit-selection {
  background-color: brown; color: yellow;
}
::-moz-selection {
  background-color: brown; color: yellow;
}
::selection {
  background-color: brown; color: yellow;
}

<div>This is a div in which you can make a selection</div>

然后我们将颜色 highlight 和 highlighttext 添加到 css 的末尾（模拟我们的自定义样式表）以显示选择颜色恢复为默认值.

/* colours from theme */
::-webkit-selection {
  background-color: brown; color: yellow;
}
::-moz-selection {
  background-color: brown; color: yellow;
}
::selection {
  background-color: brown; color: yellow;
}


/* overriding colors */
::-webkit-selection {
  background-color: highlight; color: highlighttext;
}
::-moz-selection {
  background-color: highlight; color: highlighttext;
}
::selection {
  background-color: highlight; color: highlighttext;
}

<div>This is a div in which you can make a selection</div>

免责声明：这些系统颜色已正式弃用；虽然还没有合适的替代品。此外，在 Chrome 中，它似乎将颜色重置为与没有任何样式时略有不同的颜色；看来还得再研究一下。

如何重置 ::selection 的背景颜色

How to reset background color of ::selection

css

semantic-ui