inputボタンがiPhoneでダサいグラデーションになってしまう問題を解決するCSS

お申し込みページ、お問い合わせページなどで使用するinputタグを用いたボタンがスマートフォンでの表示で、ダサいグラデーションのボタンになってしまう事があります。
私の場合は、スマートフォンでの表示で以下のようにデザインのダサいグラデーションボタンになってしまいました。

これはデフォルトのinputボタンのデザインです。これではせっかく作ったページもスマホで見た時に台無しになってしまいます。このスマートフォンでの表示を修正する為には、以下のCSSコードをstyle.cssに追加するとすぐに修正する事が可能です。

この記事の目次

inputのダサいデフォルトデザインを一発修正するCSS

以下のCSSコードをstyle.cssに記述していただく事で一発で見た目を修正する事が可能です。

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

鳥取県米子市出身。大阪市在住。株式会社STACK ONLINE 代表取締役。2018年11月に株式会社STACK ONLINEを設立し、デザインの教育事業を展開。デザイナー歴17年。好きなデザインはシンプルで力強いデザイン。