css - ボタンとリンク上のFirefoxの点線のアウトラインを削除するにはどうすればよいですか？

Question

これで、Firefoxがリンクに醜い点線のフォーカスアウトラインを表示しないようにすることができます。

a:focus { 
    outline: none; 
}

<button>しかし、タグに対してもこれを行うにはどうすればよいですか？私がこれをするとき：

button:focus { 
    outline: none; 
}

ボタンをクリックしても、ボタンにはまだ点線のフォーカスアウトラインがあります。

（はい、これがユーザビリティの問題であることは知っていますが、醜い灰色の点ではなく、デザインに適した独自のフォーカスヒントを提供したいと思います）

score 813 · Accepted Answer

813

button::-moz-focus-inner {
  border: 0;
}

于 2008-10-13T22:46:06.417 に答える

score 326 · Accepted Answer

セレクターを定義する必要はありません。

:focus {outline:none;}
::-moz-focus-inner {border:0;}

ただし、これは W3C のアクセシビリティのベストプラクティスに違反しています。アウトラインは、キーボードを使ってナビゲートする人を助けるためにあります。

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

score 49 · Accepted Answer

CSS を使用して点線のアウトラインを削除したい場合:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

score 44 · Accepted Answer

以下は、LINKSの場合、共有を考えた場合、誰かが興味を持った場合に備えて、私のために機能しました。

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

乾杯！

score 23 · Accepted Answer

23

:focus, :active {
    outline: 0;
    border: 0;
}

于 2010-06-27T23:11:36.207 に答える

score 9 · Accepted Answer

ここでほとんどの答えを試しましたが、どれもうまくいきませんでした。Chrome のボタンの青いアウトラインも削除する必要があることに気付いたとき、別の解決策を見つけました。Chrome の CSS カスタムスタイルボタンから青い枠線を削除する

このコードは、Windows 7 の Firefox バージョン 30 で機能しました。おそらく、他の誰かを助けるかもしれません:)

button:focus {outline:0 !important;}

score 8 · Accepted Answer

これにより、範囲制御が取得されます。

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

From: Firefox の範囲入力要素から点線のアウトラインを削除する

score 6 · Accepted Answer

CSSを使用してFirefoxでこれらの点線のフォーカスを削除する方法はありません。

Webアプリケーションが動作するコンピューターにアクセスできる場合は、Firefoxのabout：configに移動し、browser.display.focus_ring_width0に設定します。そうすると、Firefoxは点線の境界線をまったく表示しなくなります。

次のバグはトピックを説明しています：https ：//bugzilla.mozilla.org/show_bug.cgi？id = 74225

score 6 · Accepted Answer

これには多くの解決策がWeb上にあり、その多くは機能しますが、これを強制するため、次を使用すると何も強調表示/フォーカスできなくなります。

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

これにより、セキュリティが少し追加され、取引が成立します。

score 5 · Accepted Answer

このコードを使用して、Firefox 46 および Chrome 49 でテストされています。

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

変更前（白い点が見える）

After (白い点は見えません)

いくつかの入力フィールド、ボタンなどにのみ適用したい場合は、より具体的なコードを使用してください。

input[type=text] {
  outline: none !important;
}

score 4 · Accepted Answer

キーボードナビゲーションとアクセシビリティが台無しになる可能性があるため、フォーカスアウトラインを削除して、自分が何をしているのかを本当に理解しておく必要があると思います。

設計上の問題のためにそれを取り除く必要がある場合は:focus、ボタンに状態を追加して、これを他の視覚的な合図に置き換えます。たとえば、境界線をより明るい色に変更するなどです。

煩わしいアウトラインを取り除く必要があると感じるときもありますが、常に別のフォーカスビジュアルキューを用意しています。

また、 js関数は絶対に使用しないでください。擬似クラスblur()を使用します。::-moz-focus-inner

score 3 · Accepted Answer

button::-moz-focus-inner { border: 0; }

button動作を無効にするCSSセレクターはどこにありますか。

score 3 · Accepted Answer

リンク、ボタン、および入力要素から点線のアウトラインを削除します。

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

score 3 · Accepted Answer

集中力をなくすのではなく、集中力を高めたいと思うかもしれません。

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue}

score 3 · Accepted Answer

ボタンに境界線があり、境界線を削除せずに Firefox で点線のアウトラインを非表示にしたい場合(したがって、ボタンの余分な幅になります)、次を使用できます。

.button::-moz-focus-inner {
    border-color: transparent;
}

score 2 · Accepted Answer

これを達成する唯一の方法は設定することであるように見えます

browser.display.focus_ring_width = 0

ブラウザごとにabout：configで。

score 1 · Accepted Answer

1

これはFirefox v-27.0で動作します

 .buttonClassName:focus {
  outline:none;
}

于 2013-12-30T04:47:16.373 に答える

score 0 · Accepted Answer

0

button::-moz-focus-inner {border: 0px solid transparent;}CSSで試すことができます。

于 2010-01-07T16:19:02.377 に答える

css - ボタンとリンク上のFirefoxの点線のアウトラインを削除するにはどうすればよいですか？

25 に答える 25

Related

Reference