iPhoneでinput要素のボタンにCSSデザインを効かせる方法

コンタクトフォームの送信ボタン CSS

キレイにCSSでボタンをデザインしたつもりが、iPhoneで表示確認してみるとCSSが効いていない!

そんなときの、iPhoneでのボタン表示にCSSデザインを効かせる記述方法を紹介します。

iPhoneのOSにデフォルトで効いているCSS記述をリセットする

iPhoneのOsであるiOSには、デフォルトでinput要素のボタンを装飾する記述がセットされています。

input要素のデフォルトCSS記述

背景色には「buttonface」という名前の薄いグレー色、文字色には「buttontext」が指定されています。他にも余白(padding)・縁取り(border)・左寄せなどが指定されているので、好きなデザインのボタンに変更するためには、CSS記述が必要です。

そして、ボタンの形を整えるためにもうひとつ、大切な記述があります。

iOSをはじめwebkit系ブラウザのための記述「-webkit-appearance: push-button;」をリセットしましょう。
この記述が効いたままになっていると、iPhoneなどwebkit系のブラウザでは、丸みのあるボタンになってしまいます!!
「border-radius: 0」を指定しても丸いまま。「-webkit-appearance」をリセットしないとボタンの角丸はなくなりません。

input[type=”submit”]、input[type=”button”]、input[type=”reset”]、input[type=”file”]、の4つの要素に指定が入っているので、CSSに、リセットしたいセレクタを指定し

-webkit-appearance: none;

と書き足します。

これでiPhone表示でもボタンの丸みがなくなりました。

送信ボタンの変更前・変更後

さらにボタンをデザインする場合は、同じセレクタ内に≪余白・文字色・背景色・影・ボーダー≫などを指定して、キレイなボタンにしてください。

WordPressのコンタクトフォームの送信ボタンをデザインする方法

WordPressでお問い合わせフォームを作成するプラグイン「Contact Form 7」を使用している場合も、同様に送信ボタンがinput要素で指定されているので、iOS端末用のデザインを指定するためには、デフォルトスタイルシートによる指定をリセットします。

コンタクトフォーム7の送信ボタンのセレクタは、「.wpcf7 .wpcf7-submit」です。

さらにデザインをカスタマイズして、思い通りのボタンを作成しましょう。

Comments