クリック時にボタンの周りのフォーカスを解除する方法
ボタンをクリックすると、ボタンの周囲にハイライトが表示されます。これはChromeです。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
Bootstrapをテーマにしていますが、そうではないと確信しています。以前は別のプロジェクトでこれに気付いていました。
<a>の代わりに<button>タグを使用するとそれはなくなります。どうして？もし私が<button>を使いたいのであれば、どうすればそれをなくすことができますか？
私はこのQとAを別のページで見つけました、そしてボタンフォーカススタイルを上書きすることは私のために働きました。この問題は、Chrome搭載のMacOSに固有のものである可能性があります。
.btn:focus {
outline: none;
}
ただし、これはアクセシビリティに影響するため、ボタンと入力に対して一貫したフォーカス状態が得られるまではお勧めできません。以下のコメントによると、マウスを使えないユーザーがいます。
あなたは何かが欲しい：
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur（）メソッドはフォーカスの強調表示を正しく削除し、Bootstrapsのスタイルを乱すことはありません。
私の理解するところでは、フォーカスはonMouseDownイベントの後に最初に適用されるので、onMouseDownの中でe.preventDefault()を呼び出すことはあなたのニーズによってはきれいな解決策になるかもしれません。これは確かにアクセシビリティに優しい解決策ですが、明らかにそれはあなたのWebプロジェクトと互換性がないかもしれないマウスクリックの振る舞いを調整します。
私は現在（react-bootstrapプロジェクト内で）このソリューションを使用していますが、クリック後にフォーカスのちらつきやボタンのフォーカスの維持が表示されませんが、フォーカスをタブ表示して同じボタンのフォーカスを視覚的に視覚化できます。
フォーカスされたすべてのボタンのアウトラインを削除するのは簡単ですが（user1933897の answer のように）、その解決策はアクセシビリティの観点からは悪いです（たとえば、 ブラウザのデフォルトのフォーカスアウトライン ）
一方、クリックしたボタンがフォーカスされたと判断した場合、クリックしたボタンのスタイルを停止するようにブラウザに説得することはおそらく不可能です（OS XのChrome） 。
だから、私たちは何ができますか？いくつかのオプションが思い浮かびます。
1）Javascript（jQuery）：$('.btn').mouseup(function() { this.blur() })
ボタンの周囲のフォーカスを削除するようブラウザに指示しています直後ボタンがクリックされています。 mouseupの代わりにclickを使用することにより、キーボードベースの対話の既定の動作を維持しています（mouseupはキーボードによってトリガーされません）。
2）CSS：.btn:hover { outline: 0 !important }
ここでは、hoveredボタンのみのアウトラインをオフにします。明らかに理想的ではありませんが、状況によっては十分かもしれません。
まだ誰もこれを投稿していないと思われます。
ボタンの代わりにラベルを使用してください。
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>
これは私のために働く、言及されていない別の解決策。クリックイベントでそれを投げるだけ...
$(this).trigger("blur");
または別のイベント/メソッドからそれを呼び出す...
$(".btn_name").trigger("blur");
アウトラインを削除するために:focus { outline: none; }という規則を使用すると、リンクまたはコントロールはフォーカス可能になりますが、キーボードユーザーにフォーカスは示されません。 onfocus="blur()"のようなJSでそれを削除する方法はさらに悪くなり、キーボードユーザーがコントロールとやり取りできなくなります。
使用できるハック、つまり種類の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>
私はペンを混乱させました： http://codepen.io/snobojohan/pen/RWXXmp
ただし、パフォーマンスの問題があるので注意してください。これにより、ユーザーがマウスとキーボードを切り替えるたびに再描画が強制されます。不要な塗料を避ける方法 http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
これは私のために働きました。必要なCSSをオーバーライドするカスタムクラスを作成しました。
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-webkit-box-shadowは、Chromeブラウザとsafariブラウザで動作します。
私は同じことに気づきました、そしてそれが本当に私を悩ませているとしても、私はこれを扱う適切な方法がないと思います。
ボタンのアクセシビリティを完全に無効にするので、他のすべての解決策に対してはお勧めしません。ボタンに移動したときに、期待されるフォーカスが得られなくなります。
これは避けるべきです！
.btn:focus {
outline: none;
}
最近、しかしそれを知っている人は誰かに役立つかもしれません。 CSSは次のようになります。
.rhighlight{
outline: none !important;
box-shadow:none
}
HTMLは次のようになります。
<button type="button" class="btn btn-primary rHighlight">Text</button>
このようにあなたはBTNを保つことができます、そしてそれはそれに関連した行動です。
スタイル
.not-focusable:focus {
outline: none;
box-shadow: none;
}
を使う
<button class="btn btn-primary not-focusable">My Button</button>
私は上記のコメントでこれを述べました、しかし明快さのために別の答えとしてリストする価値があります。実際にボタンにフォーカスを合わせる必要がない限り、CSSイベントを適用する前にfocusイベントを使用して削除することができます。
$('buttonSelector').focus(function(event) {
event.target.blur();
});
これにより、clickイベントを使用したときに見られるちらつきを防ぐことができます。これはインタフェースを制限します、そしてあなたはボタンにタブを付けることができないでしょう、しかしそれはすべてのアプリケーションで問題ではありません。
上記の方法でうまくいかない場合は、これを試してください。
.btn：focus {outline：none;ボックスシャドウ：none;ボーダー：2px solid transparent;}
User1933897が指摘したように、これはChromeを搭載したMacOSに固有のものかもしれません。
それを行うための純粋なcss方法を望んでいる人々のために：
:focus:not(:focus-visible) { outline: none }
これはリンクなどにも使えますし、おまけにキーボードのアクセシビリティも維持されます。最後に、サポートしていないブラウザでは無視されます。
ボタンの周囲の境界線を削除するためにこの解決策を試してください。このコードをcssに追加してください。
お試しください
button:focus{
outline:0px;
}
うまくいかない場合は、以下を使用してください。
button:focus{
outline:none !important;
}
もう1つの可能な解決策は、ユーザーがボタンをクリックしたときに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/
これが一番うまくいきます
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
同様の問題を抱えていて、 Bootstrap 3 のタブには問題がないことがわかりました（Chrome）。それは彼らが outline-style を使っているように見えます。単に要素をクリックしていない限りフォーカスされているとき.
ブラウザがそれが何を意味するのかを決定するため、outline-styleのサポートを特定するのは困難です。いくつかのブラウザをチェックインして、フォールバックルールを使用するのが最善です。
それは仕事です、私はあなたを助けたいと思います
.btn:focus, .btn:focus:active {
outline: none;
}
私は解決策を見つけます。フォーカスするとき、ブートストラップはbox-shadowを使うので、それを無効にするだけです（評判が十分ではない、image :(をアップロードできません）。
私は追加します
btn:focus{
box-shadow:none !important;
}
できます。
CSSでこれを追加します。
*, ::after, ::before {
box-sizing: border-box;
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
このアウトライン：ボタンとタグの両方には機能しません
.btn:focus:active {
outline: none;
}
これによりクリック時にアウトラインが削除されますが、タブ移動時にフォーカスが維持されます（a11y用）。
ボタンのアウトラインをすべてのステータスで表示したくない場合は、以下のコードでCSSを上書きできます。
.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus{
outline: none;
}
tabIndex="-1"を設定できます。フォーカス可能なコントロールをタブ移動すると、ブラウザはこのボタンをスキップするようになります。
ここで提案されている他の「修正」は、フォーカスのアウトラインを削除するだけですが、それでもボタンはタブ付きのままになります。ただし、使いやすさの観点からは、グローは既に削除されているので、ユーザーは現在どのボタンにフォーカスがあるのかわかりません。
一方、ボタンを非タブ化可能にすると、アクセシビリティに影響があります。
私はこれを使ってbootstrap modalのXボタンからフォーカスのアウトラインを削除しています。
Webキットブラウザ（およびWebキットベンダのプレフィックスと互換性のあるブラウザ）を使用している場合、そのアウトラインはボタンの-webkit-focus-ring擬似クラスに属します。 outlineをnoneに設定するだけです。
*:-webkit-focus-ring {
outline: none;
}
ChromeはそのようなWebキットブラウザであり、この効果はLinuxでも発生します（Chromeスタイルの一部はmacOSのみですが）
AngularJS開発者のために私はこのソリューションを使います。
var element = $window.document.getElementById("export-button");
if (element){
element.blur();
}
忘れずに$ windowを注入してください。
ボタンを使用して「トランジション」イベントをトリガーしているときに、MacOSとChromeで同じ問題が発生しました。これを読んでいる人が既にイベントリスナを使っているのなら、あなたのアクションの後に.blur()を呼び出すことでそれを解決することができます。
例：
nextQuestionButtonEl.click(function(){
if (isQuestionAnswered()) {
currentQuestion++;
changeQuestion();
} else {
toggleNotification("invalidForm");
}
this.blur();
});
まだイベントリスナーを使用していない場合は、これを解決するためだけにリスナーを追加すると、不要なオーバーヘッドが追加される可能性があり、以前の回答のようなスタイリングソリューションの方が優れています。
<a>をボタンとして使用しても同じ問題があり、発見しました。 行方不明だった attr type="button"を追加することによる回避策は、少なくとも私にとっては普通に振舞うようにします。
<a type="button" class="btn btn-primary">Release Me!</a>
htmlタグで直接（デザインの別の場所にbootstrapテーマを残したい場合のシナリオ）。
試す例.
<button style="border: transparent;">
<button style="border: 1px solid black;">
..ect ,.目的の効果に応じて。