css - 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)。

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