【iPhone】【Safari】【css】ボタンの角丸などの消し方

ボタン類(<input type=”button”>や<input type=”submit”>など)の角丸をクリアしたい場合、

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

↑↑を指定するだけでは、iPhoneのSafariではクリアされません!!

その為、下記cssの設定が必要です:

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

そうすれば、ボタンのデフォルトcssが初期化されます(角丸以外もクリアされます。例えば、背景など)。

※参考記事
[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法 | コリス