websites checkboxes design replaced by windows 11 forced style and color.
I recently replaced my old laptop by a new one after battery life issue (and for free thks total refund warrantly). But the new laptop unfortunately come with windows 11.
and like with windows 10, FF 97+ force the windows OS color theme style for checkboxes over the websites stylised ones (like a dark themed website with its own original soft small dark gray checkboxes being replaced by big light blue windows ones making the design ugly) I tried the same trick as my former laptop by switching widget.non-native-theme.enabled to "false", but it caused a tab crash on all page using checkboxes. Restarting firefox solved the crash issue, but even if slightly different than native-theme.enabled on "true"(smaller and dark blue) the checkboxes are always a single forced windows like style on all sites
The trick worked easily on windows 10, how to force firefox to correctly use the websites own style for checkboxes and forms with windows 11? I don't want windows style take over the design of site i visiting.
All Replies (4)
someone has a solution?
Okay, I don't have Windows 11, so I'm guessing a bit here.
Keeping widget.non-native-theme.enabled set to true uses Firefox's built-in style sheets, which aim to be more consistent across platforms, while setting it to false causes Firefox to apply more platform-specific styling. Neither of these is related to whether pages can override Firefox's default form control styling.
Web pages CAN completely strip the browser styling on a checkbox in Firefox 54 and later by setting appearance: none (or -webkit-appearance: none). That creates the opportunity and obligation for the page to set the size, position, colors, etc., of that box, or it's invisible and unusable. So that means if the site isn't using that method, then it's hard to take advantage of it yourself without a bunch of work.
I relied on these pages for this information:
- https://medium.com/codex/even-better-styled-html-css-checkboxes-7e9345b5bffd
- https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
And thank you for asking because this is really cool. I think it means I can stop using pictures for fancy checkboxes in one of my add-ons.
jscher2000 - Support Volunteer said
Keeping widget.non-native-theme.enabled set to true uses Firefox's built-in style sheets, which aim to be more consistent across platforms, while setting it to false causes Firefox to apply more platform-specific styling. Neither of these is related to whether pages can override Firefox's default form control styling.
But when i had this problem on windows 10 (with firefox 97 or98 update), turning the widget to false was the procedure asked to do, and it immediatly worked after refreshing (the blue like windows style checkboxe where replaced by the site own styling). the same trick failed in windows 11, and worse, opening or refreshing pages with checkboxes caused a "tab crashed error", until i returning the widget to "true", here refreshing the crashed tab returned to the website.
Like i said, restarting firefox to save the new config solved the crash issue, but forced another windows like blue checkboxes style in the few sites i checked.
thor94 trɔe
Toggling the preference to false did not allow pages style to modify checkboxes for me on Windows 10 in Firefox 103. Are you sure you weren't using any other modifications?