iOSでinput要素のボタンにcssが効かないときの対処法

  • 公開日:2017/3/14
この記事は最終更新日から7年以上が経過しています。

Formのinputボタンに以下のようにcssをあてたつもりが、

iOS(iPhoneとかiPadとか)で確認してみると・・・

全然違うっっ!!!
という場合の対処法です。

webkit系ブラウザのデフォルトスタイルをリセットすればOKです。

今回だと、input[type=submit]input[type=button]input[type=reset]をリセットしたかったので、以下のように記述しました。

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

はじめから、リセットcssに追記しておくといいと思います。

* {
  -webkit-appearance: none;
}