iOSのbuttonのデザイン

iPhoneでフォーム送信ボタンにオリジナルデザインを適用する方法です。

pcのブラウザ上でsubmitボタンのデザインを変更したにもかかわらず、実機で見たときに、デフォルトのスタイルでボタンが表示されていたなんてことはよくあります。

/* iOSのスタイルを消去*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

-webkit-appearanceはiosのsafariなどブラウザが標準で設定しているデザインを標準的なUIにすることができるCSS3プロパティです。

PCﾔスマートフォンなど対応する機種が増えるほど、原因を把握するのは大変ですが、iphoneでの表示がおかしい場合には、-webkit-appearanceの記述をしてあげるとよいでしょう。