iPhoneで見るとフォームの表示がおかしい

iPhoneでサイトを見ると、フォーム要素の表示がおかしいことがあります。

具体的には、下の画面キャプチャのとおり、

• inputタグのテキスト入力フォームの上部に影が入る
• submitボタンが角丸

となります。

なお、PC（FireFox）だと、以下のとおり表示されます。

今日は、この問題について言及したいと思います。

原因

これはブラウザであるSafariが原因のようです。

iPhone/iPadの標準ブラウザなので、勘違いしてしまうかもしれませんが、デバイス依存ではなくブラウザ依存問題です。

解決方法

inputタグに、以下のスタイルを適用することでSafariが適用しているCSSをリセットできます。

-webkit-appearance: none;

適用した結果、以下の画面のとおり、PCと同じ表示になりました。

iPhoneは、Androidのような機種依存問題はあまりないと思っているとこんなことに出くわしたりします。

まぁ、この程度であればかわいいもんですよね（笑）

Author：yukio iizuka

フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com