【css】Safariでinputタグに付けたdisabled属性のテキストカラーが薄くなる【iPhone実機】

あるサイトのコーディングを一通り完了し、iPhone実機での表示確認をしていたところ、タイトルにあるような現象に遭遇しました。

結論

input {
  -webkit-text-fill-color: #000000;
  opacity: 1;
}

• -webkit-text-fill-colorで文字色を指定
• opacityで透明度を指定

遭遇環境

• iPhone14
• Safari：18.1.1
• iOS：18.1.1

現象

このinputにはcolor: #000000;を当てていますが、薄く表示されてしまいました。

対応結果

無事想定通り黒色にできました。

まとめ

「disabled属性」が付いているとグレーアウトが基本で、Safariではそれがデフォルトになっているのかも知れません。

「このinputはdisabledだけど、薄くしたくない」という方の助けになれば幸いです。