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

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意味着"使用与父元素相同的颜色".那不是我们想要的!

第一个示例将选择颜色设置为棕色为黄色,以模拟框架主题.只是为了确保改变这些颜色的工作原理.

/* 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中,它似乎将颜色重置为与没有任何样式时的颜色略有不同的颜色; 我似乎不得不做更多的研究.