iPhone safariのinput要素の装飾を無効化する

/ HTML5/CSS3/jQuery / Comment[0]

input要素にスタイルを書こうとするとAndroid,PCでは普通に表示されてもiPhoneで見てみるとinput type=submitで生成されたボタンなどにグラデーションや角丸が強制的についてしまいます。
以下のようなスタイルを適用しても角丸やグラデーションは確か消えなかったと思います。

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

この装飾はブラウザの機能で、要素がその環境における標準的なUIの外見になるように勝手に装飾されるようです。
この機能を無効化するにはappearanceというCSS3のプロパティを指定します。

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

上記スタイルを適用してやればiPhone safari環境でのinput type=submitの装飾が無効化され、自由なスタイルが適用できるようになります。

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可