时间戳

首页 > 解决方案 > Firefox - Windows 高对比度模式禁用按钮颜色问题

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

问题描述

我需要在 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;
    }
  }

有人可以帮忙吗？

标签： cssfirefoxhigh-contrast

解决方案

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

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

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

推荐阅读