Regressed Checkboxes and radio buttons are not displayed when MSThemeCompatible is no

Published: | Categories: HTML

Description

Firefox 54 has changed the way HTML checkboxes and radio buttons are rendered, so <input type="radio"> and <input type="checkbox"> are no longer replaced elements when styled with -moz-appearance:none. It will give web developers more flexibility in designing form controls.

This change, however, has produced an unexpected side effect where those types of elements become invisible if <meta http-equiv="MSThemeCompatible" content="no"> exists in the document <head>.

According to an MSDN article, the <meta> tag in question “disables theme support for the document” on Internet Explorer for Windows XP, and Firefox has also maintained the partial compatibility for a long time. Meanwhile, no other browsers, including Google Chrome and Microsoft Edge, support the non-standard, obscure feature.

This rendering regression has been solved with Firefox 55 by dropping the support for MSThemeCompatible. Web developers can work around the issue by simply removing the obsolete <meta> tag from the site.

References