フォームパーツのcssは初期値だらけ～第一回 button～

フォームパーツの初期値の実装が激しい

主なフォームパーツの要素は以下です。

• input
• checkbox
• radio
• select
• textarea
• button

そしてこれらは、borderや文字色、背景色などが各ブラウザによって予め実装されています。
各ブラウザで見え方が違うのはそのためです。

これらもともとのデザインを採用してもいいのですが、昨今のオシャレなサイトの増殖に合わせてフォームパーツもデザインされカスタム化されることが多くなりました。

第一回 button

buttonはborderと背景色がついていてなかなかださいです。
そのため最近ではデフォルトのボタンを見ることはありませんね。
以下のようにリセットしてあげてください。

See the Pen XKqbWV by funclur (@funclur) on CodePen.

また、逆にbodyで文字色を指定しても、buttonの文字色は変わらないことに注目してください。
厄介なやつです。

color: inheritもしくは任意の文字色をしていすることで、適応されます。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法