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） .

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