kojiokanoのブログ

コーディング業務で困ったところをまとめています。

iphoneのsafariでボタンの表示がおかしくなる場合の理由と対処法

LPなどのページを作っているとき、PCのブラウザでの互換表示ではちゃんと表示できていたのに、サーバーに上げて実機でみたら表示が違ったなんてことがよくあるとおもいます。

その原因の1つとしてiphoneios)のsafariはinput要素にグラデーションを勝手につけてしまうということがあげられます。

これはiosのみの仕様のようでmacbookでは見られない挙動でした。(2016年12月現在)

これを無効化するためにcssかsassでinput要素に以下の書き込みが必要になります。

 

cssの場合↓

-----------------------------------------------------------------------------------------------

input{

  -webkit-appearance: none;

}

-----------------------------------------------------------------------------------------------

 

 

sassの場合↓

-----------------------------------------------------------------------------------------------

input

  -webkit-appearance: none

-----------------------------------------------------------------------------------------------

 

これでOK

 

参考ページ↓

pressstocker.com