![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Question-1024x1024.png)
お問い合わせフォームなどに使う送信ボタンなどは、iPhoneなどのiOSデバイスで見るとデフォルトのスタイルが反映されてしまいます。
今回はそのスタイルをリセットする方法をご紹介します。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
パソコンとスマホ(iOS)で見るボタンデザインの違い
まずはパソコンで作ったボタンを見てみます。
![パソコンで見るボタン](https://junpei-sugiyama.com/wp-content/uploads/2020/05/btn1.jpg)
パソコンで見るボタン
次にスマホで見た時のボタンを見てみます。
![スマホで見るボタン](https://junpei-sugiyama.com/wp-content/uploads/2020/05/btn2.jpg)
スマホで見るボタン
・・・全然違いますね。
角が丸っこくなるだけでなく、色、余白も違うしグラデーションもかかっています。
最初スマホで見た時はびっくりしましたね。
これは冒頭でも書きましたが、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;
}
それではもう一度スマホで見てみます。
![スマホで見るボタン(デフォルトのスタイルをリセット後)](https://junpei-sugiyama.com/wp-content/uploads/2020/05/btn3.jpg)
スマホで見るボタン(デフォルトのスタイルをリセット後)
これでiOSデフォルトのスタイルはリセットされました。
最初スマホで見た時はびっくりするかも知れませんが、焦らず上記のCSSを追記するだけで解決するので安心して下さい。
また、textareaやselectタグなど全部に適用したい場合は以下のようにしてもOKです。
input,
select,
textarea {
-webkit-appearance: none;
border-radius: 0;
}
まとめ
今回はスマホ(iOS)でボタンが角丸のグラデーションになってしまう時の対処法について解説しました。
ボタンなど『デフォルトでスタイルがあたっている物がある』というのは覚えておきましょう。
以上になります。
![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Joy-1024x1024.png)