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

公開:2015-01-07 / 制作・開発 / ,
更新:2015-01-07
icatch_operation

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

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

001

 

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

 

となります。

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

002

 

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

 

原因

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

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

 

解決方法

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

 

webkitappearance: none;

 

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

003

 

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

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


コメント一覧

コメントはありません

コメントを残す

*

© yukio iizuka All Rights Reserved...