Magazine

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

スマートフォンにおいてデフォルトの酷いinputボタンの修正方法

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

iPhone ダサいinput グラデーションボタンの修正方法

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

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

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

修正のCSSコード記述後の表示

修正後のinput ボタンデザイン

The following two tabs change content below.
鳥取県米子市出身。大阪市在住。 株式会社STACK ONLINE 代表取締役。2018年11月に株式会社STACK ONLINEを設立し、デザインの教育事業を展開。デザイナー歴17年。好きなデザインはシンプルで力強いデザイン。
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事一覧

最新の記事