如何在高对比度模式下设置边框颜色？

Question

我正在开发的网站有一个可访问性切换开关。当高对比度模式打开时，它会为按钮、链接和输入元素添加各种轮廓和/或边框。目前它们的颜色（边框和轮廓）设置为#000，但这并不重要——它们总是显示为黑色。

我正在 Mac 上的 Firefox 中对此进行测试，方法是选中 Preferences -> Content -> Colors -> Allow pages to choose their own colors, instead of my selections above 复选框。

当背景选项设置为白色时看起来不错。但是一旦设置为黑色，我看不到边框，因为它们也是黑色的。

那么 - 我如何检测明/暗高对比度主题（-ms-high-contrast 对我没有好处）和/或当背景为黑色时如何设置白色边框？

Answer 1

您所描述的是特定于浏览器的设置（允许用户覆盖网站的样式表）。您将无法检测或覆盖这些设置（这就是它们的重点——让用户控制外观）。快照中的复选框显示“允许页面选择自己的颜色，而不是我上面的选择”——如果未选中，那么您将无法控制。可以这么说，它不在您的管辖范围内。

Answer 2

设置border: 1px solid transparent;