浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】iOSでbutton要素の角丸&グレーグラデーションを無効にする

些細なことですが、今後も使うことがありそうだったので、備忘録としてまとめ。
HTML の button 要素を iOS で表示したときに、デフォルトの見た目である「角丸&グレーグラデーション」になるのを無効にする方法です。

今回参考にさせていただいたサイトはこちらから。

【フォーム】iOSのボタンが角丸グラデーションになるのをリセット|Webデザインラボ
https://www.webdlab.com/labs/ios-button/

 

CSS はこちら。

button {
  -webkit-appearance: none;
  border-radius: 0;
  margin: 0;
  background-color: #FFF;
  border: 1px solid #555;
}

ポイントは、2、3行目の -webkit-appearance: none;border-radius: 0; です。
-webkit-appearance: none; を指定することで、iOS の Safari などで見た時のデフォルトのボタンスタイルを無効にできます。
で、次の border-radius: 0; と指定することで、ボタンの角丸を無効にできます。
なお、ボタンの角丸については、-webkit-appearance: none; を指定した段階で既に無効になってるようでしたが、念のため追加しておきます。

あとは、4行目以降で、お好きな見た目になるようカスタマイズすればOKです。
私は白色&細い黒縁の四角いボタンにしたかったので、上記のようにしています。
ちなみに、iOS では -webkit-appearance: none;border-radius: 0; だけで、白色&黒縁ボタンになったのですが、Android で見たら、一昔前のグレーのボタンのような見た目になったので、細かい指定は必須ですね。
あとは、Android と iOS の両端末で必ず見た目を確認しましょう。

…これは別に言わなくてもやっているとは思いますが、念のため。

 

以上、iOS で button 要素のデフォルトレイアウトである「角丸&グレーグラデーション」を無効にする方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)