iPhoneで表示したときのinputボタンにCSSを適用させる方法

FRONTEND

2019.05.9

2019.05.13

iPhoneで表示したときのinputボタンにCSSを適用させる方法

WEBページやサイトでフォームをコーディングしていて、普通にCSSを書いていても、iPhone(iOS)環境ではinputボタンにCSSが反映されません。

そんなときの解決方法を紹介します。

iPhoneでのinputボタンにCSSを適用させるCSS

-webkit-appearanceプロパティの値をnoneにすることで、iPhone独自のスタイルを無効化出来るようです。

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

ボタンの角丸を残したい場合は、border-radiusに任意の値を指定してください。