IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

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

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;
}