Firefox - Windows 高对比度模式禁用按钮颜色问题答案

【问题标题】：Firefox - Windows High Contrast Mode Disabled Button Color IssueFirefox - Windows 高对比度模式禁用按钮颜色问题
【发布时间】：2021-08-19 07:49:30
【问题描述】：

我需要在 Windows 高对比度模式下将禁用的材质按钮边框和颜色设为绿色。 css 更改在 chrome 上运行良好，但在 firefox 上遇到了一些问题。无论边框应用什么颜色，它都会自动变成白色。有什么方法可以将 firefox 的颜色改成绿色？

    /*For chrome, working as expected */
    @media (forced-colors: active) {
    material-button[disabled] {
      forced-color-adjust: none;
      border: 1px solid GrayText;
    }
  }

  /* For Firefox, not working */
  @media (prefers-contrast: more) {
    material-button[disabled] {
      border: 1px solid GrayText;
    }
  }

有人可以帮忙吗？

【问题讨论】：

标签： css firefox high-contrast

【解决方案1】：

截至 2021 年 7 月，没有主流浏览器支持 prefers-contrast 媒体功能，因此您的第二个媒体查询将无法工作。无论如何，这是一条红鲱鱼，因为 Windows 高对比度模式并不一定意味着任何特定的对比度级别。用户可以选择任何他们想要的颜色，并且一些用户使用 Windows 高对比度功能来创建低对比度的调色板。

Firefox 支持 forced-colors 媒体功能（从版本 89 开始），但尚未实现 forced-color-adjust 属性。但是，如果您只想指定系统颜色关键字（例如 GrayText），则不需要 forced-color-adjust 属性。您的第一个媒体查询和边框颜色应该可以在 Firefox 中使用。

请注意，Firefox 是否遵守系统颜色是可选的。它基于 Preferences > General > Colors > Use system colors 中的用户偏好。如果选中此选项，则 Firefox 将使用 Windows 的高对比度操作系统设置中指定的颜色。否则，它将使用 Firefox 浏览器设置中的颜色。

【讨论】：