macOS Safari のフォームで自動入力可能なフィールドに出てくるアイコンがダークモードで消える問題

2026 年 10 月 27 日

こなさんみんばんわ。
文章書きのリハビリにきました。

macOS Safari で自動入力可能なフィールドに出てくるアイコン

というのがあります。こんなやつです👇

このアイコン¹が出てくる入力フィールドには、登録してある自分の連絡先情報などから項目を引っぱってきて、手入力することなく自動で埋められますよ、というサインみたいなものですね。もちろん、実際にそのデータを使って項目を埋めるかどうかは個人の自由です。僕は便利なのでけっこう使っちゃいますが。

ダークモードになると消える…

ですがこのアイコン、ひとつ問題がありまして、ダークモードが適用されているページで入力フィールドも暗い背景色になっている場合、アイコンが消えてしまうのです。正確には消えるというより見えなくなります。

これは Email 入力欄なので、複数のメールアドレスを所有する人はこうやって一覧が表示されますから、まだ「ああ、ここから選択すればいいんだな」と分かりそうですが、その上の Name 欄など何の一覧も出てこない（普通何種類も名前がある人なんていないからね）ので、これでは存在にすら気が付かない人も多いんじゃないでしょうかね。

なぜ見えなくなるのか

なぜこのようなことになるかといいますと、このアイコンは塗りつぶされたボックスを mask-image プロパティでマスクすることで描かれているのですが、その塗りつぶし色が黒で決め打ちされているためです。

input::-webkit-contacts-auto-fill-button {
  mask-image: url("data:image/svg+xml,<svg viewBox=\"0 0 44 24\" xmlns=\"http://www.w3.org/200…9 7.2 7.9647 9.5765 C 7.9765 12.1059 9.7412 13.9882 12 14.0118 Z\"/></svg>");
  mask-size: 22px 12px;
  width: 22px;
  height: 12px;
  margin-inline-start: 3px;
  margin-inline-end: 2px;
  background-color: black; /* ← 犯人はお前やぁあああっ! 涙 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  -webkit-user-select: none;
}

currentColor や canvasText などにすらなってないということは、ダークモードなどが存在してなかった頃に作成したスタイルから手が入れられてないんですかね。知らんけど。

フィードバックしてみたけど塩対応された…

見えないアイコンにはアクセシビリティの問題がありますし、UA スタイルシートの不備で発生している話なのでこれは明確にバグだよな…ということで、フィードバックアシスタントから報告してみたのですが、現在の情報では診断不可ということで、修正はしてくれないようです…

慣れない英語でがんばって文章書いて、デモまで作って URL 貼って送ったのに、まじかよ😭

ていうか、類似のレポートが11件以上もあるということは、他にも問題があると思って報告してる人がいるってことでしょうに、情報不足で確認ができないんですか、そうですか…(´･_･`)

仕方がないので自力で対処した

と、色々思うところはありますが、とりあえずアップルが修正する気がないのであれば、あとはもう自力で対処するしかありません。幸い macOS Safari には（いまどき珍しく）任意のユーザースタイルシートを指定する機能がデフォルトで備わっていますので、それを利用しましょう。テキストエディタを開いて次のようなスタイルを書き、適当なファイル名.css で保存します。

::-webkit-contacts-auto-fill-button:not(:hover, :active) {
  background-color: currentColor;
}

このアイコンはマウスホバー時とアクティブ（押し込まれている）時には青色になり、少なくとも判別可能にはなるため :not() 擬似クラスで除外しておきます。canvasText ではなく currentColor 指定なのは、実際に自動入力で項目が埋まるとテーマに関わらず黄色背景に黒文字になるため、ダークモードの時に白色になる canvasText ではまずいのです。

あとは Safari の設定 > 詳細 > スタイルシートから、保存した CSS ファイルを選択するだけです。

実際に適用されたものを試せるデモ（アップルに送信したのと同じものです）を置いておきます。上の <fieldset> 内が通常のもの、下が修正コードを適用済みのものです。macOS Safari が使える方で興味のある方は、よろしければ確認どうぞ。それ以外のブラウザの方はそもそも自動入力アイコンが出ないので、見ても意味がないです🤣²