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框架，今天我一直在重写它的价值观。我遇到了选择选项，默认情况下会被覆盖，我想将其设置为计算机默认值。正如你们中的一些人所知，你可以在macbooks中更改选择颜色，所以我希望我的用户使用计算机的默认选择颜色。

那么，我该怎么办？我尝试继承和透明，但它们不起作用。

Answer 1

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

inherit之类的颜色不起作用，因为inherit表示＆＃34;使用与父元素相同的颜色＆＃34;。那不是我们想要的！

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

免责声明：这些系统颜色已被正式弃用;但是没有适当的替代品。此外，在Chrome中，它似乎将颜色重置为与没有任何样式时的颜色略有不同的颜色;我似乎不得不做更多的研究。

如何重置::选择的背景颜色

1 个答案: