スマホで見たら送信ボタンが丸っこくなってた・・・なぜ？
お問い合わせフォームなどに使う送信ボタンなどは、iPhoneなどのiOSデバイスで見るとデフォルトのスタイルが反映されてしまいます。
今回はそのスタイルをリセットする方法をご紹介します。
パソコンとスマホ(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)でボタンが角丸のグラデーションになってしまう時の対処法について解説しました。
ボタンなど『デフォルトでスタイルがあたっている物がある』というのは覚えておきましょう。
以上になります。
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
2023年12月31日まで！5大無料特典あり🎁
