CSSで解決！お問い合わせフォームの見た目がブラウザごとに違う件

お問い合わせフォームの見た目がブラウザごとに違う理由

PCでは問題ないが、スマホでお問い合わせフォームの見た目を各ブラウザで確認してみたら、見た目が違うことはよくあります。

なぜ、見た目が違うかといいますと、selectタグやinputタグのブラウザのデフォルトのCSS（デフォルトスタイルシート）が異なるためです。

そのため、そのCSSをリセットするCSSを指定する必要があります。

selectタグとinputタグのデフォルトCSSをリセットする方法

下記のように「appearance: none;」を、selectタグとinputタグに指定することで、ブラウザ特有のデフォルトCSSを解除することができます。

デフォルトCSSをリセットしたら、あとは通常通りCSSを当てていけば問題ありません。

属性指定する場合

下記はinputタグのtype属性、値はbuttonのみ指定し、デフォルトCSSをリセットしている状態です。

button以外の属性を指定する場合は、buttonの箇所を書き換えてください。

selectタグやinputタグで起きる問題についてのまとめ

selectタグやinputタグは、お問合せフォームによく使われるタグで、セレクトボックスやテキストボックス・ラジオボタンなどを作成するタグです。

原因は、ブラウザ特有のデフォルトCSSによるものです。

そのため、デフォルトCSSをリセット後、任意のCSSを当ていきます。

Chrom・Safari・firefoxで見た目がことなるのでお問い合わせフォームのチェックは念入りに行なったほうが良さそうです。

お問合せフォームのサンプルコード

おまけですが、基本的なお問合せフォームのサンプルコードを貼っておきましたので、コピペして使ってください。