iPhoneの送信ボタンのスタイルが違う…【Contact Form 7のサブミットリセット】

またまた便利なContact Form 7のお話…。

フォームや送信ボタンのデザインをCSSでしっかり書いたのに…iPhoneで見ると『送信ボタンのデザインが全然違う！』

めちゃめちゃ困ったのでここにメモしておきます。

iPhoneのスタイルをリセットする

個人的にはほぼテンプレート化していて、このまま記述すればとりあえずOKという認識でいいかと思います。

input[type="submit"],
input[type="button"] {
  border-radius: 10px;
  -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;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

基本的にContact Form 7を使った問い合わせフォームを設置するウェブ制作案件が多いので、利用頻度が高いことからほぼテンプレート化していて何も考えずにこれを書いてから、CSSを書くようにしています(^^;;

border-radiusなどはお好みで…。