web-dev-qa-db-ja.com

どのようにボタンだけでなく、リンク上のFirefoxの点線のアウトラインを削除するには？

Firefoxに、見にくい点線のフォーカスが表示されないようにすることができます。 リンク集 これとともに：

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

ボタンをクリックしても、ボタンの輪郭が点線で囲まれています。

（そして、はい、私はこれがユーザビリティの問題であることを知っています、しかし私は醜いグレードットの代わりにデザインにふさわしい私自身のフォーカスヒントを提供したいです）

cssfirefox
459
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
686
user27656

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

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

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

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

280
Anderson Custódio

点線のアウトラインを取り除くためにCSSを使用したい場合は、次のようにします。

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

以下はLINKSの場合私のために働きました、共有の考え - 誰かが興味を持っている場合。

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

乾杯！

42
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

[更新]この解決策はもううまくいきません。私のために働いた解決策はこれです 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

9
Renato Carvalho

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

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

button:focus {outline:0 !important;}
7
Vartox

これを解決する方法はWeb上に多数ありますが、その多くは機能しますが、強制的に使用するため、次のコマンドを使用すると、強調表示やフォーカスを当てることはできません。

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

これはちょっとした追加セキュリティを追加して契約を封印します

5
Shannon Hochkins

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

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

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

5
Vitaly Sharovatov

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

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

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

4
Abhay Singh

このコードを使用してFirefox 46およびChrome 49でテスト済み。

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

前（白い点が見えます）

input with white dots

後（白い点は見えません） enter image description here

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

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

ハッピーコーディング！

4
Madan Sapkota

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

だから、!importantを追加することを忘れないでください

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


またはその他のコード

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

あなたはそれを取り除くよりも焦点を強化することをお勧めします。

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

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

ボタンの上にボーダーがあり、Firefoxで点線のアウトラインを非表示にしたい場合withoutボーダーを削除する（そしてそれ故にボタンの余分な幅です）あなたは使うことができます：

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

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

browser.display.focus_ring_width = 0

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

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

buttonは動作を無効にしたいCSSセレクタになります。

2
wavded

フォーカスのアウトラインを削除することで、自分が何をしているのかを実際に知っておく必要があると思います。キーボードのナビゲーションやアクセシビリティのためにフォーカスのアウトラインが乱れる可能性があるからです。

デザイン上の問題でそれを削除する必要がある場合は、ボタンに:focus状態を追加して、これを他の視覚的な合図に置き換えます（境界線をより明るい色などに変更するなど）。

時々私はその厄介なアウトラインを取り出す必要性を感じるが、私は常に代替焦点の視覚的手がかりを用意する。

そしては決してblur() js関数を使用しません。 ::-moz-focus-inner疑似クラスを使用してください。

2
Flatline

以下の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;
}
2
kurumkan

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

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;
}
2
Fizer Khan

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

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

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

2
bob

うん、見逃すな！重要

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

上記から多くのオプションを試した後、次のものだけが私のために働きました。

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

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

0
usual

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

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

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ファイルの後に来るべきであることに注意してください。

0
Ehsan88