スポンサーサイト

/ スポンサー広告 / Comment[-]

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

/ HTML5/CSS3/jQuery / Comment[0]
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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の装飾が無効化され、自由なスタイルが適用できるようになります。

関連記事

コメント

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