Firefox Quantum - 无法隐藏输入

Question

我正在编写一个在Bootstrap 4上使用丰富的Material Design主题的网站。到目前为止，我已经能够使所有浏览器的Chrome与该网站至少在某种程度上相匹配（Chrome的自动填充指示器）是最难以约会的），但自从我开始使用Firefox Quantum开发以来，我在输入字段周围隐藏焦点时遇到了困难：

根据MDN文档，我应该可以将outline: none属性应用于input:focus或input:-moz-focusring，但这些似乎都不起作用。我可以看到属性出现在样式检查器中，Firefox并没有显示它被任何东西覆盖，但焦点环仍然显示出来。

我理解指出焦点非常重要，但是看到我已经有了自己明确的焦点指示，我宁愿隐藏浏览器提供的焦点，因为它会干扰我的样式。

Answer 1

好的，所以，我试图在JSFiddle（我无法做到）中重现它时解决了这个问题。这太荒谬了。

在我的网站上，我从源代码编译Bootstrap和Material Design以及我自己的SCSS，以便我可以覆盖两者的颜色和选项。事实证明，Material Design会覆盖Bootstrap的enable-shadows选项，但只有在引用SCSS时才会覆盖，因此无法在JSFiddle中重现（SCSS具有已经编译成CSS）。

违规规则位于mixins/_forms.scss下的Bootstrap form-control-focus文件中。它是Bootstrap的最新次要版本中的新功能，显然，因为我已经在Chrome中进行了测试，因为更新和矩形也显示在那里（而在更新Bootstrap之前没有）。规则不会出现在检查器中，因为打开检查器会取消控制，并且：焦点状态不会触发JS事件让Bootstrap知道它的重点，这让我相信它是浏览器chrome突出显示控件。