スマホで見たら送信ボタンが丸っこくなってた・・・なぜ？
お問い合わせフォームなどに使う送信ボタンなどは、iPhoneなどのiOSデバイスで見るとデフォルトのスタイルが反映されてしまいます。
今回はそのスタイルをリセットする方法をご紹介します。
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
パソコンとスマホ(iOS)で見るボタンデザインの違い
まずはパソコンで作ったボタンを見てみます。
パソコンで見るボタン
次にスマホで見た時のボタンを見てみます。
スマホで見るボタン
・・・全然違いますね。
角が丸っこくなるだけでなく、色、余白も違うしグラデーションもかかっています。
最初スマホで見た時はびっくりしましたね。
これは冒頭でも書きましたが、iOSのデフォルトのスタイルが反映されているからです。
CSSでiOSのスタイルをリセット
せっかく自分でデザインを整えたのに何てことをしてくれるんだと思いますよね。
なので、CSSでiOSのスタイルをリセットしちゃいましょう。
input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}これだけでOKです。
ちなみにbuttonタグの場合は、以下のようにtypeをbuttonにすればOKです。
input[type="button"] {
-webkit-appearance: none;
border-radius: 0;
}それではもう一度スマホで見てみます。
スマホで見るボタン（デフォルトのスタイルをリセット後）
これでiOSデフォルトのスタイルはリセットされました。
最初スマホで見た時はびっくりするかも知れませんが、焦らず上記のCSSを追記するだけで解決するので安心して下さい。
また、textareaやselectタグなど全部に適用したい場合は以下のようにしてもOKです。
input,
select,
textarea {
-webkit-appearance: none;
border-radius: 0;
}まとめ
今回はスマホ(iOS)でボタンが角丸のグラデーションになってしまう時の対処法について解説しました。
ボタンなど『デフォルトでスタイルがあたっている物がある』というのは覚えておきましょう。
以上になります。
この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！
