css - 要素はフォーカスを失いません

Question

これ - http://bootswatch.com/2/cerulean/とこれ - http://bootswatch.com/cerulean/ (3 番目のブートストラップ) を比較してください。すぐにもう一度クリックしてポインターをそこから離します-すべて問題ありませんが、2番目のバージョンで同じことをしようとするとfocus、要素の境界線と暗い背景が表示されます。追加することで解決しました

.navbar .nav>li>a:focus {
background-color: rgba(0,0,0,0);
}

.navbar .nav>li>a:focus:hover {
background-color: #1684c2;
}

.dropdown-toggle {
outline: none !important; }

しかし、それが最善の解決策ではないか、クロスブラウザではない可能性があると思います-それが私の質問です。

Answer 1

要素に !important タグを設定することは、通常、ベスト プラクティスとは見なされませんが、要素に Outline プロパティを実装する場合は、次のように機能する必要があります。

a:focus {outline: 0px none;}