CODEWITHSUNDEEP
cssfirefoxhigh-contrast
Srikanth
Srikanth

Reputation: 580

Firefox - Windows High Contrast Mode Disabled Button Color Issue

I have a requirement to make the disabled material button border and color as green color in windows high contrast mode. The css changes are working fine with chrome, but facing some issue with firefox. Whatever the color applied to border, it is automatically turning to white only. Is there any way we can override the color to green for 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;
    }
  }

Can someone please help on this.

Upvotes: 1

Views: 957

Answers (1)

andrewmacpherson
andrewmacpherson

Reputation: 1561

As of July 2021, NO major browsers support the prefers-contrast media feature, so your second media query won't work. It's a red herring in any case, because Windows High Contrast mode doesn't necessarily imply any particular contrast level. The user can pick any colours they want, and some users employ the Windows High Contrast feature to create low contrast colour palettes.

Firefox supports the forced-colors media feature (since version 89), but has not yet implemented the forced-color-adjust property. However the forced-color-adjust property isn't required if you just want to specify a system colour keyword such as GrayText. Your first media query and border colour should work in Firefox.

Note that Firefox's adherence to system colours is optional. It's based on a user preference at Preferences > General > Colors > Use system colors. If this option is checked, then Firefox will use the colours specified in Windows' High Contrast OS settings. Otherwise, it will use colours from Firefox's browser settings.

Upvotes: 0

Related Questions