:: IOSのスマートデバイス(iPhone, iPad)のフォームだけデザインが崩れる時の対処方法

/ / WEB制作・開発デザイン

このブログで起きたコメントを投稿するボタンをcssでデザインした際になぜかIOS端末だけデザインがおかしかった現象の解決方法をメモ。

ちなみに、この現象はGoogle ChromeやSafariブラウザのPC端末では起きず、また同様のブラウザからDeviceを切り替えた時にも起きなかった。
(つまり、IOS端末(iPhone、iPad)の時だけ現象が起きた)

 

対象箇所のスタイル

 

HTML

 

CSS

 

変更後のスタイル

「-webkit-appearance: none;」をCSSに追加

HTML

 

CSS

これで解決できた。

*参考にしたサイト
http://coliss.com/articles/build-websites/operation/css/css3-styling-submit-buttons-for-mobile-safari.html

SNS SHARE

LEAVE A REPLY