iPhone(iOS)で送信ボタンなどのinput要素にCSSを正しく適用させる方法

iPhone(iOS)で送信ボタンなどのinput要素にCSSを正しく適用させる方法

CSSがブラウザによって効かなかったり、こっちでは表示できるのにあっちではうまくいかない!ってことよくありますよね。表示の差異があることって知っておかないと、ニアミス頻出したりします。忘れないように忘備録としても、この記事で紹介しておきます。

今回はiPhoneでのinput要素にCSSが効かない!という時の対策方法です。

スポンサーリンク

iPhone(iOS)だとinput要素にCSSが効かない

iphoneのinput要素に効かない時のサンプル

上の画像は例ですが、CSSでinput要素に色など設定しても、なぜかiPhoneだとこんな感じになります。あれっ、なんか色薄くなってる?謎のグラデーション&なんか形も丸くなってるよみたいな・・・。特に勝手に丸くなってるの気になりますが、このままだとボタンも見づらくなってしまいます。

通常のCSSの書き方だと、iPhoneで表示するとうまくCSSが適用されないんですね。

というわけで、そんな時はCSSにコードを追記すると治ります。

appearanceを使って設定をリセットする

設定したいinput要素のCSSの一番上にひとまずこの1行を入れるだけです

input[type="submit"]{
-webkit-appearance: none;
}

-webkit-のベンダープレフィックスを使うと、safariなどで適用されます。

これを入れておくことで設定がリセットされるので、その上で続けて色や角丸の設定をすると指定した通りに表示できます。

角丸が適用されないよ?という時もベンダープレフィックスをつけてみてください。

-webkit-border-radius: 10px;
 border-radius: 10px;

PCのブラウザだったり、スマホだったり、対応しないといけないものが増えると把握していくのが大変ですが、iPhoneでボタン表示がおかしい!という時はこれを覚えておくとすぐ解決できると思います。

お役に立てば幸いです!
スポンサーリンク

SNS・feed登録はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です