CSS:iPhoneで見た時にボタンの色が薄い時の対処法


最終更新日:2020.11.14
Pocket

お問い合わせフォーム作るときなどに、送信ボタンにスタイルをつけると思います。

たとえばデフォルトは

こんな感じ。

cssで装飾して

このようになったとしましょう。

ところがこれをiPhone(iOS)で見ると

 

 

 

こんな風に、なんかグラデーションっぽく、薄く、角丸になってしまうという、なんとも意図しない見た目になってしまいます。

 

これを解消するには、cssで、該当のセレクタのスタイルの中身の一番上に

-webkit-appearance: none;

と書いてあげましょう。

 

iPhoneでもきちんと表示できるようになりました★

 

iPadやiPhoneで見え方が変になってしまう場合はぜひお試しください!!

Pocket