フォームパーツの初期値の実装が激しい
主なフォームパーツの要素は以下です。
- 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」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (4件) を見る