Firefoxが入力/プレースホルダーの色を変更しているのはなぜですか？

Question

Firefoxに、私のフォームのプレースホルダーの色として指定している色を使用するようにすべてを試みました。使用を含む :-moz-placeholder 私のCSSとすべてのものでは、結果として得られる色は私が指定したものではありません。

Firefoxは薄い灰色のデフォルトの入力/プレースホルダーの色を使用していることを知っていますが、実際に完全に変更しないのに、なぜ変更するオプションがあるのですか？

これは、すべてのFirefox固有のCSSを含むデモを行うために作成したCodepenです。

年： http://codepen.io/jtlr/pen/bpjft

新しい： http://codepen.io/jtlr/pen/ekjhh

Answer 1

Firefoxのデフォルトのプレースホルダースタイリングは次のとおりです。

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 0.54;
}

カラースタイルがまったくありません（参照はです http://hg.mozilla.org/mozilla-central/file/a07aebef20e7/layout/style/forms.css#l160）。これは重要です。なぜなら、あなたがただ設定した場合にこのように color と background 入力で、特別なプレースホルダースタイリングがありません。設定した色を拾い上げますが、見た目が薄くなります。

したがって、プレースホルダーを完全にレストルしたい場合は、その不透明度を1に設定します。

Answer 2

Firefox 19+には2つのコロンが必要です。::

だから使用してください ::-moz-placeholder

:: -moz-placeholder pseudo-elementは、Firefox 19で非推奨されている：moz-placeholder pseudo-classの代替として導入されました。

とは対照的に :-moz-placeholder

-moz-placeholder pseudo-classは、Firefox 19の::-moz-placeholder pseudo-elementを支持して廃止されます。

作業CODEPENの例 -FFのみ。

::-moz-placeholder {
  color:red;
}

それとは別に、これはプロパティとは対照的にセレクターです。したがって、

p { :-moz-placeholder: #000000; }

間違っています。