メールアドレス入力項目の見栄えが他のテキスト入力項目と違うのですがなぜですか?

HTML5 ではメールアドレス入力項目は <input type="email" /> と表現されるのに対し、通常のテキスト入力項目は <input type="text" /> と表現されます。このように ‘type’ 属性の値に違いがあります。

お使いのテーマの CSS スタイルシートの内容を精査すると、中に 属性セレクタ を使用している箇所が見つかると思います:

input[type="text"]
{
	...
}

この ‘input[type=”text”]’ というセレクタは、タイプが ‘text’ ではないメールアドレス入力項目にはマッチしません。このスタイルルールをメールアドレス項目にも適用させたい場合は、次のようにセレクタを追加します:

input[type="text"],
input[type="email"]
{
	...
}

関連項目: コンタクトフォームのスタイル指定

WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。