ボタンのFirefoxの点線のアウトラインとリンクを削除する方法は？

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

a:focus { 
    outline: none; 
}

しかし、<button>タグにこれをどのように行うこともできますか？私がこれをするとき：

button:focus { 
    outline: none; 
}

ボタンをクリックしても、ボタンのフォーカスの輪郭は点線のままです。

（そして、はい、これは使いやすさの問題であることを知っていますが、醜い灰色のドットの代わりに、デザインに適した独自のフォーカスヒントを提供したいと思います）

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

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

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

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

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

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; 
    }

以下は、LINKSの場合に役立ちました。共有を考えました-誰かが興味を持った場合。

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

乾杯！

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

[更新]このソリューションは動作しなくなりました。私のために働いた解決策はこれですhttps://stackoverflow.com/a/3844452/925560

正解としてマークされた回答は、Firefox 24.0では機能しませんでした。

ボタンとアンカータグ上のFirefoxの点線のアウトラインを削除するには、以下のコードを追加しました。

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,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

私はここで解決策を見つけました：http : //aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

ここでほとんどの答えを試しましたが、どれも私にとってはうまくいきませんでした。Chromeのボタンの青い輪郭も取り除く必要があることに気付いたとき、別の解決策を見つけました。ChromeのCSSカスタムスタイルボタンから青い枠を削除

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

button:focus {outline:0 !important;}

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

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

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

これについては多くの解決策がウェブ上にありますが、その多くは機能しますが、これを強制するため、次のように使用すると、何も強調/焦点を合わせることができなくなります。

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

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

これは範囲制御を取得します：

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

From：Firefoxの範囲入力要素から点線の輪郭を削除します

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

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

以前（白い点が見える）

後（白い点は見えない）

少数の入力フィールド、ボタンなどにのみ適用する場合は、より具体的なコードを使用します。

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

ハッピーコーディング!!

このCSSを選択ボックスに追加するだけです

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

これは私にとってはうまくいきます。

フォーカスのアウトラインを削除することで、何をしているのかを本当に理解する必要があると思います。キーボードのナビゲーションやアクセシビリティを損なう可能性があるからです。

設計上の問題のために削除する必要がある場合は:focus、ボタンに状態を追加して、ボーダーをより明るい色に変更するなど、他の視覚的な手掛かりに置き換えます。

時々私はその迷惑なアウトラインを取り除く必要性を感じますが、私は常に代替フォーカスの視覚的な手がかりを準備します。

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

ほとんどの場合!important、CSSコードにを追加しないと機能しません。

したがって、追加することを忘れないでください !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

または他のコード：

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

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

ここでbutton、動作を無効にするCSSセレクターを指定できます。

あなたはそれを取り除くのではなく、焦点を強化したいかもしれません。

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

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

リンク、ボタン、入力要素から点線の輪郭を削除します。

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;
}

ボタンにボーダーがあり、ボーダーを削除せずにFirefoxで点線のアウトラインを非表示にしたい場合（したがって、ボタンの幅が余分にある場合）、次のように使用できます。

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

以下のCSSコードはこれを削除するために機能します：

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,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

これを達成する唯一の方法は設定することです

browser.display.focus_ring_width = 0

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

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

 .buttonClassName:focus {
  outline:none;
}

上記の多くのオプションを試した後、次のオプションのみがうまくいきました。

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Bootstrap 3とともに、このコードを使用しました。ルールの2番目のセットは、フォーカス/アクティブボタンに対してブートストラップが行うことを取り消すだけです。

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

カスタムcssファイルは、それを上書きするために、htmlコードのBootstrap cssファイルの後に来る必要があることに注意してください。

うん、お見逃しなく！

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

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