Firefox Quantum - 入力時にフォーカスリングを非表示にできない

Question

私は、ブートストラップ4の上に豊富なマテリアルデザインテーマを使用するウェブサイトを作成しています。これまでのところ、すべてのブラウザのChromeをサイトに合わせることができました多少（Chromeのオートフィルインジケータはこれまでで最も困難なもの）が、私はFirefoxの量子に開発を開始して以来、私は、入力フィールドの周りにフォーカスリングを非表示に困難に実行しているよ：

によると、 MDNドキュメントでは、プロパティをinput:focusまたはinput:-moz-focusring、howeに適用できるはずですこれらのどれもうまくいかないようです。スタイルインスペクタに表示されているプロパティを見ることができます.Firefoxでは、それがオーバーライドされていることは表示されませんが、フォーカスリングはまだ表示されます。

フォーカスの表示が重要であることを理解していますが、すでにフォーカスが明確に表示されているのを見て、ブラウザが提供するものを非表示にして、自分のスタイリングに干渉します。

Answer 1

これはJSFiddleで再現しようとしている間に解決しました（これはできませんでした）。バカバカしい。

私のサイトでは、ブートストラップとマテリアルデザインを独自のSCSSとともにソースからコンパイルしています。そのため、2つの色とオプションをオーバーライドできます。 SCSSがの両方で参照されている場合に限り、マテリアルデザインがブートストラップのenable-shadowsオプションをオーバーライドしますが、があるため、JSFiddle（SCSSはすでにCSSにコンパイルされています）で再現することはできません。

違反のルールは、ブートストラップのmixins/_forms.scssファイルのform-control-focusにあります。 Bootstrapの最新のマイナーバージョンでは新しくなっています。なぜなら、私はChromeからアップデートしてからテストしていて、その上に矩形が表示されていたからです（ブートストラップをアップデートする前ではありませんでした）。インスペクタを開くとコントロールのフォーカスが外れるので、ルールがインスペクタに表示されず、フォーカス状態でJSイベントがトリガされないようにしてブートストラップにフォーカスがあることを知らせるようにしました。