iPhoneサイトでフォーム送信ボタンにオリジナルデザインを適用する方法 – CSS3 appearanceプロパティ

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちは。お久しぶりです。daikuharaです。今回は【iPhoneで送信ボタンにオリジナルデザインを適用する方法】についてです。

フォームをスマホ対応しているとき、ばっちりsubmitボタンのデザインも設定したはずのに、あれれ・・・? iPhone実機で確認すると、角丸のグラデーションのかかったボタンに変更されてしまいますよね。

↓↓↓

submit_ios

???

これをキャンセルしてオリジナルの送信ボタンを適用する方法がこちら。

input[type=”submit”] {
-webkit-appearance: none;
}

これでiPhoneで見ても、上のsubmitボタンはくっきりオレンジ一色で表示されているはずです。

-webkit-appearanceとは何なのかというと、ブラウザが標準で設定している振る舞いを指定できるCSS3のプロパティのようです。
フォームまわりの設定が色々指定できるみたいなので、次回ちょろっと試してみようとおもいます。