iPhone、safariでボタンの文字が青くなる原因と対処方

web制作

※本ページはプロモーションを含みます

目次
  1. はじめに
  2. 原因
  3. 対処法

はじめに

WEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじゃないボタン（buttonタグ）の色が黒じゃない…」という状態になったことはないでしょうか？Windowsの端末で作業している人は特に。

BootstrapなどのCSSフレームワークを使用していれば基本要素には全部ノーマライズ的なスタイルがあたっていると思って忘れがちな落とし穴です。

原因

この原因は単純でiOS15だからです。

iOS15ではbuttonタグのcolorに–apple-system-blueが指定されているのでbody要素にcolorを指定しても–apple-system-blueに上書きされて色が青く表示されてしまうのです。

対処法

cssでbuttonタグにcolorを明示してやります。

button {
  color: #000;
}

buttonタグのほかのoption要素などもこの–apple-system-blueがついているので一辺に変更したい場合は下記のような指定方法もありますが影響範囲が広すぎるのでおすすめしません。
特に複数人で操作することが前提のサイトでは作業者が色の変更で混乱するのでなおさらです。

body {
  * {
    color: #000;
  }
}