ボタンをクリックすると、すべてのボタンの周りが強調表示されます。これは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;
box-shadow: none;
}
ただし、これはアクセシビリティに影響を与えるため、ボタンと入力の一貫したフォーカス状態が得られるまではお勧めできません。以下のコメントによると、マウスを使用できないユーザーがいます。
私の理解では、フォーカスはonMouseDownイベント後に最初に適用されるため、ニーズによっては電話をかけるe.preventDefault()ことonMouseDownがクリーンな解決策になる可能性があります. これは確かにアクセシビリティに優しいソリューションですが、明らかに、Web プロジェクトと互換性がない可能性があるマウス クリックの動作を調整します。
私は現在このソリューションを (react-bootstrapプロジェクト内で) 使用しており、クリック後にフォーカスのちらつきやボタンのフォーカスが保持されませんが、フォーカスをタブで移動して、同じボタンのフォーカスを視覚的に視覚化することはできます。
フォーカスされたすべてのボタンのアウトラインを削除するのは簡単ですが (user1933897 の回答のように)、その解決策はアクセシビリティの観点からは良くありません (たとえば、ブラウザのデフォルト フォーカス アウトラインをいじるのをやめるを参照) 。
一方、クリックしたボタンがフォーカスされているとブラウザが判断した場合、クリックしたボタンをフォーカスされたものとしてスタイリングするのをやめるようにブラウザを説得することはおそらく不可能です (OS X の Chrome のことを考えています)。
では、何ができるでしょうか？いくつかの選択肢が頭に浮かびます。
1) Javascript (jQuery):$('.btn').mouseup(function() { this.blur() })
ボタンがクリックされた直後に、ボタンの周りのフォーカスを削除するようブラウザに指示しています。mouseup代わりにを使用することでclick、キーボードベースの対話のデフォルトの動作を維持しています (mouseupキーボードによってトリガーされません)。
2) CSS:.btn:hover { outline: 0 !important }
ここでは、ホバーされたボタンのみのアウトラインをオフにします。明らかに理想的ではありませんが、状況によっては十分な場合があります。
これは私にとってはうまくいきました。必要な CSS をオーバーライドするカスタム クラスを作成しました。
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-webkit-box-shadow は、Chrome および Safari ブラウザーで機能します。
これは私にとってはうまくいきますが、言及されていない別の解決策です。クリックイベントでスローするだけです...
$(this).trigger("blur");
または、別のイベント/メソッドから呼び出します...
$(".btn_name").trigger("blur");
私は解決策を見つけます。フォーカスすると、ブートストラップは box-shadow を使用するので、それを無効にするだけです (評判が不十分で、画像をアップロードできません :( )。
私は追加します
.btn:focus{
box-shadow:none !important;
}
できます。
ルール:focus { outline: none; }を使用してアウトラインを削除すると、リンクまたはコントロールはフォーカス可能になりますが、キーボード ユーザーにはフォーカスが示されません。JS のような方法でそれを削除する方法onfocus="blur()"はさらに悪く、キーボード ユーザーがコントロールを操作できなくなります。
使用できるハックには、ユーザーがマウスを操作したときにルールを追加し、キーボードの操作が検出された場合にルールを再度削除することが含まれます。Lindsay Evansはこのライブラリを作成しました: https://github.com/lindsayevans/outline.js:focus { outline: none; }
しかし、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/
私は同じことに気付きました。本当にイライラしますが、これを処理する適切な方法はないと思います。
ボタンのアクセシビリティを完全に無効にするため、指定された他のすべてのソリューションに対してお勧めします。そのため、タブでボタンに移動しても、期待されるフォーカスが得られません。
これは避けるべきです！
.btn:focus {
outline: none;
}
それを行うための純粋なcssの方法が必要な人のために：
:focus:not(:focus-visible) { outline: none }
これはリンクなどにも機能し、ボーナスとして、キーボードのアクセシビリティが維持されます。最後に、:focus-visible をサポートしていないブラウザーでは無視されます。
ボタンの周囲の境界線を削除するには、このソリューションを試してください。このコードを css に追加します。
試す
button:focus{
outline:0px;
}
うまくいかない場合は、以下を使用してください。
button:focus{
outline:none !important;
}
別の可能な解決策は、ユーザーがボタンをクリックしたときに 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/
私たちは同様の問題に苦しんでいましたが、 Bootstrap 3 のタブ (Chrome) には問題がないことに気付きました。ブラウザが何をするのが最善かを決定できるようにするアウトラインスタイルを使用しているように見えます.Chromeはあなたが望むことをしているようです:要素をクリックしただけでない限り、フォーカスされたときにアウトラインを表示します.
ブラウザがそれが何を意味するかを決定するようになるため、 のサポートを特定するのoutline-styleは困難です。いくつかのブラウザーでチェックインし、フォールバック ルールを設定することをお勧めします。
html タグで直接 (ブートストラップ テーマをデザインの別の場所に残したい場合)。
試す例..
<button style="border: transparent;">
<button style="border: 1px solid black;">
…など。希望する効果に応じて。
Webkit ブラウザ (および Webkit ベンダー プレフィックスと互換性のあるブラウザ) を使用している場合、そのアウトラインはボタンの疑似クラスに属します-webkit-focus-ring。単純に次のように設定outlineしnoneます。
*:-webkit-focus-ring {
outline: none;
}
Chrome はそのような Webkit ブラウザーであり、この効果は Linux でも発生します (一部の Chrome スタイルはmacOS のみですが、macOS だけのものではありません) 。
ここで提供される CSS ソリューションは機能しますが、
公式のBootstrap Theming guideで提案されているように、 Bootstrap 4 wayを使用することを好む人にとっては、これが役立ちます。
変数のオーバーライドを追加する custom.scss ファイル (上記のガイドを参照してください ^) で、次の変数を追加して、ボタンのボックス シャドウを削除します。
// import bootstrap's variables & functions to override them
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// override the variables you want (you can look them up in node_modules/bootstrap/scss/variables file, they're the ones that have the !default keyword at the end)
$btn-focus-box-shadow: none;
// option A: include all of Bootstrap (see the above guide for other options)
@import "node_modules/bootstrap/scss/bootstrap";
これは私にとってはうまくいきます。
box-shadow や他のコントロール用のブートストラップの変数ファイルには多くの変数があることに注意してください。そのため、それらを使用したい場合、および/またはこの特定の変数が機能しない場合は、あなたの側でさらに調査が必要になる場合があります。 .
次のいずれかを試してください。
outline:0;
または
outline:0px;
または
outline: none;
と
$(this).trigger("blur");