frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

フォームパーツの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もしくは任意の文字色をしていすることで、適応されます。