フォームの各要素はブラウザによって基本となるデザインが異なります。 デフォルトの状態のフォームをChromeとFirefoxで比較してみました。 ChromeFirefox 分かりにくいですが、文言や大きさや色、アイコンなどほぼ異なっています。これがChromeとFirefoxだけでなく、Safari、IEでもそれぞれが独自の表現をさせるので、全部のデザインが異なっている状態です。 コーダーとしてはこの差異を極力なくし、デザインカンプ通りに実現することが求められます。 この記事では、各種フォームのCSSを初期化(ブラウザ間での差異をなくし)オリジナルなデザインを再現する方法を紹介していきます!
![フォームのCSSを初期化してオリジナルなデザインを再現しよう! | HPcode(えいちぴーこーど)](https://cdn-ak-scissors.b.st-hatena.com/image/square/c3da5119461bcd7de73ac650ea67a40b4cd65f3a/height=288;version=1;width=512/https%3A%2F%2Fhaniwaman.com%2Fcms%2Fwp-content%2Fuploads%2F2018%2F12%2Fform-css0.jpg)