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

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

ボタンをクリックすると、その周囲がすべてハイライト表示されます。これは Chrome の場合です。

未選択 選択済み

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

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

<a>の代わりに タグを使用すると消えます<button>。なぜですか? を使用したい場合、<button>どうすれば消えますか?

ベストアンサー1

別のページでこの Q&A を見つけましたが、ボタンのフォーカス スタイルをオーバーライドするとうまくいきました。この問題は Chrome を搭載した MacOS に固有のものである可能性があります。

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

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

おすすめ記事