Technology

[user against stylesheet]ボタンの周りの枠線をCSSで消したいとき

2021-01-19

ボタンの周りの枠を消したい時どうするかのメモ。

まずはOutline:none;を試す

まずは、ボタンのCSSにOutline:none;を追加してみる。


outline: none;で解決しない

outline: none;を試したが、まだ、周りに枠線ができてしまう。


GoogleのDeveloper Toolでチェックしてみた

すると、「user against stylesheet」の中のcssが枠線を作っているらしい。


「user against stylesheet」とはなんなんだろう

「user against stylesheet」ブラウザ毎に定義されているデフォルトのCSSのことらしい。

このCSSは自分でCSSを記述しなくても、勝手に表示されるものなので、いくら自分で書いたコードを見直しても、デフォルトのCSSの存在をわかってないと、気づかないという罠にハマる。


border: 0;でuser against stylesheetの枠線を消してみた

border: 0;でuser against stylesheetで適用されてたボタンの枠線を消してみたところ、これがうまくいった。

-Technology