13

コンテクスト

Firefox 14（および13）; 特定の条件下で無視される特定のCSSスタイル

問題

次のCSSを使用します。

*
{
    outline:none;
    -moz-outline:none;
    -moz-user-focus:ignore;    
}

JSFiddle

Firefox 14（および13）は、要素Tabを切り替えるために使用するときにこれらのスタイルを無視します。select使用後にこれらの要素をクリックしてTabも、アウトラインが表示されます。

ノート

  • select具体的には、代わりにスタイリングし*ても効果はありません。
  • selectこれは要素でのみ発生します。

質問

これはバグですか、それとも意図した動作ですか？

アウトラインが無期限に表示されないようにするために使用する必要がある他のCSSスタイルはありますか？

4

4 に答える 4

8

これは既知のバグであり、Stackoverflowに関するいくつかの議論のきっかけとなっています。私が読んだことから、Mozillaは、CSSがこの要素の動作を処理するのに間違った場所であると判断し、代わりに他の方法で処理することを選択しました。現時点での唯一の解決策は、要素を使用するtabindex="-1"か、要素を別のものとして表示するように設定し、ドロップリストのルックアンドフィールのスタイルを変更することです。ただし、これにより、ワームの缶自体が開きます。

あなたがこれを行うことを選択した場合、私は過去に次のような恨みを持って成功しました：

select {
    appearance: normal;
        -webkit-appearance: none;
        -moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}

外観はブラウザに要素を別のものとして表示するように指示しますが、これはベンダー間で一貫性がありません。appearance: normal;は仕様ですが、webkitは通常をnoneに置き換えます。-moz-appearance: radio-container;完全にカスタマイズされたドロップリストの矢印クロームを削除しながら、選択した選択オプション内にテキストを表示するために私が見つけた唯一の方法です。ただし、機能し、カスタマイズしたいフォーカスリングが追加されないものが見つかるまで、利用可能なオプションを試してみてください。Internet Explorerでは、必要に応じて選択を曲げるために、さらに手間がかかります。完全に可能ですが、この質問と回答の範囲外です。

于 2012-07-08T19:40:54.663 に答える
2

これまでのところ、それを克服するために私が見つけた唯一の方法は、tabindex='-1'（フィドルを参照）を設定することです。これは、もちろん、要素をtab選択チェーンから完全に削除します。それはユーザーインターフェイスには良くありません、そして私の推測はあなたが望むものではありません（私はあなたがtabアクセシビリティを維持したいと思いますが、ハイライトのためにあなた自身のスタイリングをするだけです）。

于 2012-07-06T18:53:41.030 に答える
2

もう1つの解決策は、アウトラインを設定することです。なしで、ボックスシャドウを設定します。例えば：

.my_elements:focus
{
    outline: none;
    box-shadow: 0 0 3px 0px red;
}
于 2014-01-07T14:39:55.967 に答える
1

使用する

*:-moz-focusring {
  outline: 2px solid blue;
}

クロームに似たものになります

また、macを使用している場合は、これも有効にする必要があります。Firefox でリンクのキーボードフォーカスを許可するにはどうすればよいですか。

于 2019-11-08T17:49:06.843 に答える