0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

buttonタグ選択時のoutlineを無効にする

Last updated at Posted at 2020-08-12

警告 コメントにいただいたように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」に含まれており,全てのブラウザで利用可能となっています。

0
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?