ブラウザによって変わるプレースホルダの色指定を統一する

ホームページでお問い合わせフォームを作っていて気付いたのですが、ブラウザによってプレースホルダの文字色に違いがありました。

プレースホルダというのは、こういうヤツ。

枠の中に文字が入っていない状態では、グレー色で表示されていて、何か文字を入力しようとすると消えてくれる、ガイド的な便利なヤツです。

この文字の色に違いがあったのです。

具体的に言うと、Firefoxだけ他のブラウザより文字色が薄い。

Firefox規定のCSSのせい？

結論から言うと、CSSでプレースホルダに対してopacityを指定してあげることで解決できました。例えば以下のように指定します。

input::placeholder {
    color: #aaa; //← 色はご自由に
    opacity: 1;
}

こうすることで、Firefoxでも他のブラウザと同じ文字色（色の濃さ）で表示されるようになりました。

さいごに

Firefoxで色合わせをすると、ChromeやOperaなどでは色が濃すぎて、既に文字が入力してあるんじゃないか、と勘違いしやすい状況に。

かといって、Chromeなどに合わせると、今度はFirefoxで薄すぎて、ガイド的な役目を果たすはずのプレースホルダがほとんど見えない、という状況になってしまう。

でも、opacity:1を指定しておくことで、ブラウザによって見やすさが変わってしまうことが無くなり、意図した通りの表示になるのでした。

いや～、良かった良かった。

ということで、無事解決です！お疲れ様でした！