iPhoneなどのiOSでinput要素のボタンにCSSが効かない場合の対処法

iPhoneやiPadなどのiOS系のブラウザで、input要素のボタンにCSSが効かない場合の対処法について解説します。

デフォルトのスタイルをリセットすれば任意のCSSをinput要素に反映することができます。

input要素にCSSが効かない原因

iOS系のsafariでinput要素にCSSが効かない原因は、webkit系のブラウザにはデフォルトのスタイルが当たっているからです。

リセットCSS（ブラウザ間の表示の差異を無くすCSS）を使っていると、このデフォルトのスタイルが無効化されていると思うので問題は無いはずです。

次のようなsubmitボタンがあったとします。

webkit系以外のブラウザ（Google Chromeなど）でボタンの表示を確認すると定義したCSSデザインが適用されています。

しかし、webkit系のブラウザ（iPhoneなど）ではCSSが効きません。

両者の見た目を同じにしたいのですが、後者のボタンには勝手に丸みが付いたり、グラデーションが掛かったりしています。

この問題はデフォルトのスタイルをリセットすることで解決します。

input要素にCSSを反映させる方法

webkit系ブラウザのデフォルトスタイルをリセットするのは簡単です。

iPhoneなどでsubmitボタンの装飾をクリアするためのコードは以下の通りです。

この2行を先程のCSSに追加してみます。

そうすることでsafariなどのwebkit系ブラウザでも定義したCSSが効くようになりました。

submit以外のボタンもスタイルをクリアしたい場合はまとめて定義してしまいましょう。

全ての要素でwebkit独自の装飾が不要な場合は次のようにします。

まとめ

iPhoneなどのwebkit系ブラウザでCSSが効かない場合の対処法について解説しました。

Google Chromeは以前はwebkitエンジンを採用していましたが現在はBlinkエンジンを使っています。

Google Chromeでしか動作確認をとっていないとiPhoneなどでCSSが効いていないことに気が付けないので注意したいところです。