クリック時にボタンの周りのフォーカスを削除する方法

225

ボタンをクリックすると、すべてのボタンがハイライト表示されます。これはChromeにあります。

未選択 選択済み

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

私はテーマでBootstrapを使用していますが、そうではないと確信しています。以前、別のプロジェクトでこれに気づいていました。

の<a>代わりにタグを使用すると、問題が解決し<button>ます。どうして？使用<button>したい場合、どうすればそれを解消できますか？

html  css  twitter-bootstrap 
— ショーンクラークヘス
ソース
12
アウトライン：0; 興味があるかもしれません
— Wiggler Jtag 2013
クリック後にクラスが追加されますか？
— Kuzgun 2013
1
概要：0は役に立たないようであり、webkitの外観もそうではありません
— Sean Clark Hess
7
この問題を回避するためのさまざまな方法を示唆する28の回答はすべて、今日のフロントエンドWeb開発の残念な状態の証拠です。
— デルタニン2018
3
このアクセシビリティ機能が問題であると考える人々は、今日のフロントエンドWeb開発の残念な状態の証拠です。
— Quentin

回答:

292

別のページでこのQとAを見つけ、ボタンのフォーカススタイルを上書きするとうまくいきました。この問題は、Chromeを搭載したMacOSに固有の場合があります。

.btn:focus {
  outline: none;
  box-shadow: none;
}

ただし、これはアクセシビリティに影響するため、ボタンと入力のフォーカス状態が一貫するまではお勧めしません。以下のコメントのとおり、マウスを使用できないユーザーがいます。

— ジェリミア
ソース
33
私もこれを考えましたが、アウトラインを削除するとアクセシビリティの問題が発生しませんか？
— シルベノン2014年
10
他に選択肢はないと思います。.btn:active:focusセレクタを追加して、アクティブ状態から削除することもできます。
— シルベノン2014年
45
ボタンからアウトラインを削除すると、アクセシビリティが低下します。マウスを制御できず、キーボードでページをタブで移動できる必要があるユーザーがいます。アウトラインを削除すると、それが非常に困難になります。ボタンがクリックにフォーカスされないようにすることをお勧めします。
— マーフィーランドル2016年
将来の旅行者のために、このコードはデフォルトボタンのすべてのボタン状態のすべてのスタイルを完全に置き換えます（すべてのボタンではない）：.btn-default, .btn-default:hover, .btn-default:active, .btn-default:active:focus, .btn-default:visited, .btn-default:focus { color: #dcdcdc; background-color: #232323; outline: none; }
— Geordie
1
組み込みのブートストラップ変数を使用する場合、これらの2つの変数を次のように設定することでこれを実現できます。$ btn-focus-width：0; $ btn-focus-box-shadow：none;
— 新幹線
109

あなたは次のようなものが必要です：

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.blur（）メソッドはフォーカスの強調表示を正しく削除し、Bootstrapsのスタイルを台無しにしない。

— ショットトン
ソース
9
これは、それを台無しにしてしまう一瞬のアウトラインを表示します：/
— シルベノン2014年
2
クリックイベントの代わりにフォーカスイベントをトリガーしてもフリッカーは発生しません。
— Charles
2
これはうまくいきました！別のclick（）イベントハンドラー（つまり、上記のボタンをクリックしたときに実行されるコード）を同じボタンにアタッチしようとすると、問題が発生する可能性がありますか？
— Nils_e 2015
4
誰かがここでこれがブートストラップv4で動作するかどうか疑問に思っている場合は、動作します。2018年も有効な回答です。
— jreed
4
上位投票の質問と比較して、アクセシビリティは問題ありませんか？
— CharlesM
47

私の理解では、フォーカスはonMouseDownイベントの後に最初に適用されるため、ニーズによっては呼び出しe.preventDefault()がonMouseDownクリーンなソリューションになる場合があります。これは確かにアクセシビリティに配慮したソリューションですが、Webプロジェクトと互換性がない可能性があるマウスクリックの動作を調整します。

私は現在このreact-bootstrapプロジェクト（プロジェクト内）を使用しており、クリック後にフォーカスのちらつきやボタンのフォーカスが保持されませんが、フォーカスをタブで移動して同じボタンのフォーカスを視覚的に視覚化できます。

— pjs
ソース
2
はい。あなたのソリューションは機能します。先端をありがとう。これが解決策のフィドルです。ただし、すべてのボタンにJavaScriptハンドラーをアタッチする必要があります。CSSのみのソリューションでこれを実現できたら素晴らしいと思います。
— Galeel Bhasha 2016
1
クリックすると要素にフォーカスすることを人々は期待していると思いますが、このソリューションはそれを防ぎます。私はよく要素をクリックしてから離れる前に、マウスを離してフォーカスを当て、そこからタブできるようにします。
— Michael Tontchev 2017年
7
スニペットをブラウズする人にとって、これは仕事とのonClick保存する必要があります：onMouseDown={e => e.preventDefault()}
— アダム・K・ディーン
1
これにより、スペースバーとリターンキーでボタンが「クリック」されなくなります。おそらく、より完全なソリューションは、これを次のように追加することですonKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}。
— jfbloom22
onKeyUpイベント内でe.preventDefault（）を呼び出さないでください。それを行うと、スペースキーまたはリターンキーを押してタブ移動またはどこかをクリックした後、ボタンがフォーカスされたままになります。
— jfbloom22
30

まだ誰も投稿していないとは信じられません。

ボタンの代わりにラベルを使用します。

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

フィドル

— アダム・マッケナ
ソース
11
これはほとんどのユーザーにとって問題なく機能しますが、この方法はスクリーンリーダーやキーボードにとって使いづらく、目の不自由なユーザーや、運動能力が低下しているユーザーはボタンを操作できません。
— マーフィーランドル2016年
8
1.ラベルを<a>タグに置き換えます。キーボードからアクセスできるようにします。2.スクリーンリーダーユーザーのアクセシビリティを向上させるために、aria-role = "button"を追加します。 フィドルを更新
— Galeel Bhasha 2016
素晴らしい解決策は私を助けましたが、ラッパーを使用しても、角度指示にはどういうわけか機能しません。たとえば<a class="btn"><my-directive/></a>
— ya_dimon
2
マウスを使用しないユーザーは、タブをたどるとラベルが完全にスキップされ、アクセシビリティが低下します
— フェリペ
1
Bootstrap 4では、ボタンの外観が変更されているようです。
— ジェイソン・キム
30

（user1933897の回答のように）すべてのフォーカスされたボタンのアウトラインを削除するのは簡単ですが、その解決策はアクセシビリティの観点からは悪いです（たとえば、ブラウザーのデフォルトのフォーカスのアウトラインでメッシングを停止を参照）。

一方、クリックした後にボタンがフォーカスされていると思われる場合、クリックされたボタンをフォーカスされたスタイルに設定することを停止するようにブラウザーを説得することはおそらく不可能です（私はOS X上のChromeです）。

では、何ができるでしょうか？いくつかの選択肢が思い浮かびます。

1）Javascript（jQuery）： $('.btn').mouseup(function() { this.blur() })

ボタンをクリックした直後にボタンの周りのフォーカスを削除するようにブラウザーに指示しています。mouseup代わりにclickを使用することで、キーボードベースの操作のデフォルトの動作を維持します（mouseupキーボードによってトリガーされません）。

2）CSS： .btn:hover { outline: 0 !important }

ここでは、ホバーされたボタンのみのアウトラインをオフにします。明らかにそれは理想的ではありませんが、状況によっては十分かもしれません。

— アレクシス
ソース
4
数値1は便利なヒントです。ボタンが押されていないときはフォーカスが無効になりますが、押されている間は表示されたままになります。クリックしたアクティブな要素へのフォーカスをで無効にしました:active:focus {outline:none;}。
— 間違いなく
イベントリスナーをバインドする簡略関数はjQueryで非推奨になっているので、.on('mouseup', function() { ... })代わりに使用する方が良い.mouseup()
— Crazy Redd
16

これでうまくいきました。必要なCSSをオーバーライドするカスタムクラスを作成しました。

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

ここに画像の説明を入力してください

-webkit-box-shadowは、ChromeおよびSafariブラウザーで機能します。

— men_aka
ソース
私にとっては機能しますが、border: none !important;同じ寸法を維持するためにボタンを削除する必要がありました
— Emeka Mbah
1
上記のonClickフォーカスを削除しようとしていましたが、「ボックスシャドウ：なし！重要」という回答は機能しませんでした。@Menakaに感謝します
— Zaif Warm
11

これは私にとっては機能しますが、言及されていない別の解決策です。クリックイベントでそれを投げるだけです...

$(this).trigger("blur");

または、別のイベント/メソッドから呼び出します...

$(".btn_name").trigger("blur");
— ロブ
ソース
これの問題は、キーボードのユーザーがボタンに「クリック」すると（フォーカスしてからスペースを押すことによって）、フォーカスが失われることです。次に、どこにいてもタブに戻る必要があります。😡
— Tamlyn
8

ルール:focus { outline: none; }を使用してアウトラインを削除すると、リンクまたはコントロールはフォーカス可能になりますが、キーボードユーザーにはフォーカスが表示されません。そのようなJSでそれを削除する方法onfocus="blur()"はさらに悪く、キーボードのユーザーがコントロールを操作できなくなります。

使用できるハックは、一種のOKであり、:focus { outline: none; }ユーザーがマウスを操作したときにルールを追加し、キーボードの操作が検出された場合は再度削除することを含みます。Lindsay Evansがこのためのlibを作成しました：https : //github.com/lindsayevans/outline.js

しかし、私はhtmlまたはbodyタグにクラスを設定することを好みます。そして、いつCSSを使用するかを制御します。

例（インラインイベントハンドラーはデモンストレーションのみを目的としています）：

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

私はtogheterにペンを入れました：http ://codepen.io/snobojohan/pen/RWXXmp

ただし、パフォーマンスの問題があることに注意してください。これは、ユーザーがマウスとキーボードを切り替えるたびに強制的に再描画します。不要なペイントの回避の詳細http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

— スノボジョハン
ソース
6

私も同じことに気づきましたが、それは本当に私を困らせますが、これを処理する適切な方法がないと思います。

他の解決策はボタンのアクセシビリティを完全に無効にするため、他のすべての解決策はお勧めしません。ボタンにタブで移動すると、期待したフォーカスが得られなくなります。

これは避けてください！

.btn:focus {
  outline: none;
}
— オスカーボラニョス
ソース
私はこれが間違っているとは思いません。フォーカスされたときにボタンにわずかに異なる稲妻があるので、キーボードユーザーでもそれを認識できます。しかし、これは十分ではありません。マウスの左ボタンを押し続けると、枠が表示されるからです
— apocalypz
6

解決策を見つけます。焦点を合わせると、ブートストラップはボックスシャドウを使用するため、無効にするだけです（十分な評判がなく、画像をアップロードできません:(）。

私は追加します 

.btn:focus{
    box-shadow:none !important;
}

できます。

— タフィー
ソース
6

オプション1：:focus-visible疑似クラスを使用する

:focus-visible擬似クラスは、ボタンや（タッチまたはマウスクリックを経由して、すなわち）キーボードでナビゲートしていないユーザーのための様々な要素に見苦しい輪郭とフォーカスリングを殺すために使用することができます。

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

警告：2020年現在、:focus-visible疑似クラスはブラウザ間で広くサポートされていません。ただし、ポリフィルは非常に使いやすいです。以下の手順を参照してください。


オプション2：.focus-visibleポリフィルを使用する

このソリューションでは、上記の疑似クラスの代わりに通常のCSSクラスを使用し、公式のJavascriptベースのポリフィルであるため、幅広いブラウザーをサポートしています。

ステップ1：JavaScriptの依存関係をHTMLページに追加する

注：フォーカスを表示するポリフィルには、classListをサポートしていないいくつかの古いブラウザ用の追加のポリフィルが必要です。

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

ステップ2：スタイルシートに次のCSSを追加する

以下は、上記で詳細に説明したCSSソリューションの修正バージョンです。 

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

ステップ3（オプション）：必要に応じて 'focus-visible'クラスを使用する

誰かがクリックまたはタッチを使用したときにフォーカスリングを実際に表示したい項目がある場合は、focus-visibleクラスをDOM要素に追加します。

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

資源：

デモ：

— ジェームズウィルソン
ソース
しかし、Chromeでさえまだサポートされていない場合、それはおそらく（現時点では）最善の解決策ではありません
— Elijah Mock
代わりに何を提案しますか？
— JamesWilson
このソリューションがより標準化されるまで、他の回答が言うように概要を隠します
— Elijah Mock
私が読んだことから、アクセシビリティが懸念される場合、アウトラインカルテブランチを隠すこと<whatever>:focus { outline: none }は、このソリューションよりも悪い考えです。アクセシビリティコミュニティには、アウトラインを削除せずに、すべてを：focusスタイル（アウトラインまたはボックスシャドウ）にして、ブラウザが許可する方法を実装するまで：focus-visibleをサポートしたくないという人が実際にいます。ユーザーは、すべてのアイテムをフォーカス可能にするかどうかについてユーザー設定を指定します。私は：focus-visibleはデザインの問題とa11yの間の幸せな媒体だと思います。
— JamesWilson
5

上記がうまくいかない場合は、これを試してください：

.btn：focus {outline：none; box-shadow：none; border：2px solid transparent;}

user1933897が指摘したように、これはChromeを搭載したMacOSに固有のものである可能性があります。

— アルン
ソース
それでもこれが有効であるとき、使用bootstrap 4.0-のウィンドウで
— 3gwebtrain
5

遅いですが、それを知っている人は誰かを助けるかもしれません。CSSは次のようになります。

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTMLは次のようになります。

<button type="button" class="btn btn-primary rHighlight">Text</button>

これにより、btnとそれに関連する動作を維持できます。

— ステファニー・ウィチェ
ソース
1
element:focus { box-shadow: none; }青い輪郭/影を削除しました。
— user435421 2017
3

上記のコメントでこれを述べましたが、明確にするために別の回答としてリストする価値があります。ボタンに実際にフォーカスを合わせる必要がない限り、CSS効果を適用する前に、フォーカスイベントを使用してボタンを削除できます。

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

これにより、クリックイベントの使用時に見られるフリッカーを回避できます。これはインターフェースを制限し、ボタンにタブで移動することはできませんが、すべてのアプリケーションで問題になるわけではありません。

— チャールズ
ソース
これは私にとってトリックの半分を行いました。ReactとReact-Bootstrapを使用しています。クリック後、ボタンはハイライトされたままで、この周りに輝きがありました。e.target.blur（）;を追加する グローは削除されますが、ボタンの色は変わりません。
— pixelwiz 2017
3

スタイル

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

使用する

<button class="btn btn-primary not-focusable">My Button</button>
— ボグダン・カンテルク
ソース
このソリューションは他の回答とどのように異なりますか？
— apaul
2
あなたはすべてのボタン、リンクなどの動作をオーバーライドすることなく、「-フォーカス可能ではない」クラスを指定して必要であることの要素のフォーカスを削除することができます-一つだけの小さな違いがあります
— ボグダンKanteruk
3

ボタンの周囲の境界線を削除するには、この解決策を試してください。このコードをcssに追加します。

試す 

button:focus{
outline:0px;
}

動作しない場合は、以下を使用してください。

button:focus{
 outline:none !important;
 }
— ラナ・アーラムギーア
ソース
2つ目は、React Material UIボタンでも機能します
— Geek Guy
3

それを行うための純粋なCSSの方法を望んでいる人々のために：

:focus:not(:focus-visible) { outline: none }

これはリンクなどでも機能し、キーボードのアクセシビリティを維持します。最後に、：focus-visibleをサポートしていないブラウザでは無視されます

— マーティンペドロス
ソース
4
これは、developer.mozilla.org
— Justin Kahn
focus-visible現在、公式のポリフィルがあります。この質問に対する私の回答stackoverflow.com/a/60219624/413538は、実際にこれをすべて理解する方法について詳しく説明しています。
— JamesWilson
2

同様の問題が発生しており、Bootstrap 3の タブ（Chrome）には問題がないことがわかりました。ブラウザーが何をすべきかを決定できるアウトラインスタイルを使用しているように見え、Chromeはあなたがやりたいことをしているように見えます。

outline-styleブラウザがそれが何を意味するかを決定するようになるので、のサポートを特定するのは困難です。いくつかのブラウザーでチェックインし、フォールバックルールを設定することをお勧めします。

— TeknoFiend
ソース
2

別の考えられる解決策は、ユーザーがボタンをクリックしたときにJavascriptリスナーを使用してクラスを追加し、別のリスナーでフォーカスされているそのクラスを削除することです。これにより、アクセシビリティ（目に見えるタブ）が維持されると同時に、クリックされたときにフォーカスされたボタンを検討するというChromeの風変わりな動作が防止されます。

JS：

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS：

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

ここに完全な例：https : //jsfiddle.net/4bbb37fh/

— セブ・ウールフォード
ソース
クリックではなくマウスダウンを使用します。クリックすると、マウスを押したまま（離さずに）アウトラインが表示されます。
— Vincent Hoch-Drei
2

それは仕事です、私はあなたを助けたいと思います

.btn:focus, .btn:focus:active {
    outline: none;
}
— ДмитрийБудницкий
ソース
.btn：focusには、アクセシビリティの概要が含まれている必要があります（タブ移動時）
— yennefer
2 
.btn:focus:active {
  outline: none;
}

これにより、クリックするとアウトラインが削除されますが、タブ移動時にフォーカスが保持されます（a11yの場合）

— エネファー
ソース
これは、マウスを押したときに輪郭のみを削除します。マウスを離すと、アウトラインが表示されます。
— Wellspring
2

これは最もよく機能します

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
1 
  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

このアウトライン：どれもボタンとタグの両方で機能しません

— ミラノパニグラヒ
ソース
これはどのように質問に答えますか？説明を追加してください。
— アンドレ・クール
1

これをCSSに追加します。

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
— ガブリエル・レイス
ソース
0

ボタンを使用して「遷移」イベントをトリガーしているときに、MacOSとChromeで同じ問題が発生しました。これを読んでいる人がすでにイベントリスナーを使用している場合は.blur()、アクションの後にを呼び出すことで解決できます。

例：

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

イベントリスナーをまだ使用していない場合は、これを解決するためだけにリスナーを追加すると、不要なオーバーヘッドが追加される可能性があり、以前の回答のようなスタイリングソリューションの方が優れています。

— ホスパブロス
ソース
0

設定できますtabIndex="-1"。フォーカス可能なコントロールをTabキーで移動すると、ブラウザはこのボタンをスキップします。

ここで提案されている他の「修正」では、フォーカスのアウトラインのみが削除され、ボタンはタブ化されたままになります。ただし、ユーザビリティの観点からは、既にグローを削除しているため、ユーザーは現在どのボタンがフォーカスされているかを知ることができません。

一方、ボタンを非タブ化すると、アクセシビリティに影響します。

私はのXボタンからフォーカスのアウトラインを削除するために使用していますbootstrap modal。これにより、下部にある「閉じる」ボタンが重複しているため、私のソリューションはアクセシビリティに影響を与えません。

— zmechanic
ソース
0

Webkitブラウザー（および場合によってはWebkitベンダープレフィックスと互換性のあるブラウザー）を使用している場合、そのアウトラインはボタンの疑似クラスに属します-webkit-focus-ring。単に次のように設定outlineしnoneます。

*:-webkit-focus-ring {
  outline: none;
}

ChromeはそのようなWebkitブラウザであり、この影響はLinuxでも発生します（MacOSだけではなく、一部のChromeスタイルは macOSのみです）。

— ネイト・シマー
ソース
0

<a>ボタンとしての機能を使用して同じ問題を抱えていましたが、attr を追加することで回避策が欠けtype="button"ていて、少なくとも正常に動作することがわかりました。

<a type="button" class="btn btn-primary">Release Me!</a>

— spcsLrg
ソース
このtype属性はこれに影響を与えることはなくbutton、無効な値です。属性は、MIMEタイプを受け入れ、それがリンク（例えば、以下の場合には得ることを期待すべきデータの種類をクライアント伝えます<a type="application/pdf" ...>。
— クエンティン・
@クエンティンありがとう。はい、承知しています。私は始めましたrole="button"が、うまくいきませんでした（の<button>代わりにを使用した後<a>）。私の実装では、特に要求さ<a>れません <button>。いろいろ試してみたところ、この回避策（おそらくBSバグ）を発見しました！
— spcsLrg
0

htmlタグで直接（ブートストラップテーマをデザインの別の場所に残したい場合）。

試してみる例

<button style="border: transparent;">
<button style="border: 1px solid black;">

..ect 、. 目的の効果に応じて。

— 誰も
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.