Open1
(HTML・CSS)Buttonタグのデフォルトスタイルをリセットする方法
Buttonタグのちょっといまいちなデザインを初期化したい時は、各プロパティごとにリセットする必要があるということを知れたのでメモ。
参考記事
buttonの実装で一番悩ましいのは、buttonのスタイルです。
(中略)
buttonをスタイルするには、行ごとにプロパティをリセットする必要があります。
/* ✅ */
button {
padding: 0;
border: none;
outline: none;
font: inherit;
color: inherit;
background: none
}
このCSSでdivのように見えて動作するbuttonができます。さらに、ブラウザのデフォルトのフォーカススタイルも使用できるという利点もあります。