お問い合わせフォームの見た目がブラウザごとに違う理由
PCでは問題ないが、スマホでお問い合わせフォームの見た目を各ブラウザで確認してみたら、見た目が違うことはよくあります。
なぜ、見た目が違うかといいますと、selectタグやinputタグのブラウザのデフォルトのCSS（デフォルトスタイルシート）が異なるためです。
そのため、そのCSSをリセットするCSSを指定する必要があります。
selectタグとinputタグのデフォルトCSSをリセットする方法
下記のように「appearance: none;」を、selectタグとinputタグに指定することで、ブラウザ特有のデフォルトCSSを解除することができます。
デフォルトCSSをリセットしたら、あとは通常通りCSSを当てていけば問題ありません。
input, select {
-webkit-appearance: none;
appearance: none;
}
-webkit-appearance: none;
appearance: none;
}
属性指定する場合
下記はinputタグのtype属性、値はbuttonのみ指定し、デフォルトCSSをリセットしている状態です。
button以外の属性を指定する場合は、buttonの箇所を書き換えてください。
input[type=”button”] { -webkit-appearance: none; appearance: none; }
selectタグやinputタグで起きる問題についてのまとめ
selectタグやinputタグは、お問合せフォームによく使われるタグで、セレクトボックスやテキストボックス・ラジオボタンなどを作成するタグです。
原因は、ブラウザ特有のデフォルトCSSによるものです。
そのため、デフォルトCSSをリセット後、任意のCSSを当ていきます。
Chrom・Safari・firefoxで見た目がことなるのでお問い合わせフォームのチェックは念入りに行なったほうが良さそうです。
お問合せフォームのサンプルコード
おまけですが、基本的なお問合せフォームのサンプルコードを貼っておきましたので、コピペして使ってください。
<html lang=”ja”>
<head>
</head>
<body>
<div>
<form action=”/send.php” method=”post”>
<div>
<label for=”name”>名前</label>
<input type=”text” id=”name” name=”name”>
</div>
<div>
<label for=”email”>メールアドレス</label>
<input type=”mail” id=”email” name=”email”>
</div>
<div>
<label for=”message”>内容</label>
<textarea id=”message” name=”message”></textarea>
</div>
<input type=”submit” value=”送信する”>
</form>
</div>
</body>
</html>
<head>
</head>
<body>
<div>
<form action=”/send.php” method=”post”>
<div>
<label for=”name”>名前</label>
<input type=”text” id=”name” name=”name”>
</div>
<div>
<label for=”email”>メールアドレス</label>
<input type=”mail” id=”email” name=”email”>
</div>
<div>
<label for=”message”>内容</label>
<textarea id=”message” name=”message”></textarea>
</div>
<input type=”submit” value=”送信する”>
</form>
</div>
</body>
</html>
our note サービス一覧
our noteはブログに加えて、下記のサービスを行っております。
バナー制作やコーディングなどの、Web制作に関するご依頼を頂いております。
また、私が制作したLINEスタンプの販売も行っております。
詳細は、下記をご覧ください。
ココナラ
「ココナラ」というサービスを活用して、バナー制作やコーディングの案件を受注しております。
品質を担保するため、最大2案件までとさせていただいております。
案件のご相談やご依頼がございましたら、ココナラからご依頼をお願いいたします。
ココナラ