警告 コメントにいただいたようにoutline: none;
の指定は非推奨となります
:focus
擬似クラスで効果を上書きして対応します。
style.css
button:focus {
outline: none;
}
ただ、outlineを無効にすることはユーザーのフォーカス位置の手がかりを奪ってしまうことになるので、
マウスや指をボタンの上に乗せたときに表示するアニメーション(いわゆる「ホバーアニメーション」)を,ボタン押下時にも適用するなどの対処は行った方がいいです。
style.css
button:focus, button:hover {
outline: none;
background: green;
}
ちなみに:focus
はBasic Selectorであり,一般的に利用可能です。
Can I use ":focus"
を見ると,
:focus-visible
は,FirefoxとChromeにおいて,かろうじて利用可であり,
:focus-within
は,IEを除いた一般的なブラウザで利用可能となっていますが,
:focus
は,最下段の「CSS 2.1 selectors」に含まれており,全てのブラウザで利用可能となっています。