[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。

質問

Chromeは プレースホルダ属性 オン input[type=text] 要素（おそらく他の要素もそうでしょう）を使用しています。

しかし、以下のCSSでは、プレースホルダーの値には何もしていない。

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

しかし Value はまだ残ります。 grey ではなく red .

プレースホルダーのテキストの色を変更する方法はありますか？

解決方法は？

実装

擬似要素、擬似クラス、何もない、の3種類の実装があります。

• WebKit、Blink（Safari、Google Chrome、Opera 15+）、Microsoft Edgeは、擬似要素を使用しています。 ::-webkit-input-placeholder . ^{[ Ref ]}
• Mozilla Firefox 4～18は擬似クラスが使用されています。 :-moz-placeholder ( 一 コロン)を使用します。 ^{[ Ref ]}
• Mozilla Firefox 19+ は擬似要素を使用しています。 ::-moz-placeholder が、しばらくの間は古いセレクタがまだ機能します。 ^{[ 参照 ]}
• Internet Explorer10、11では擬似クラスが使用されています。 :-ms-input-placeholder . ^{[ Ref ]}
• 2017年4月 ほとんどのモダンブラウザは、シンプルな擬似要素 ::placeholder ^{[ Ref ]}

Internet Explorer 9以下では placeholder 属性は全く使用できませんが Opera 12以下では プレースホルダーのCSSセレクタ

最適な実装については、まだ議論が続いています。擬似要素が実際の要素のように動作することに注意してください。 シャドウDOM . A padding の上に input は、疑似要素と同じ背景色を取得しません。

CSSセレクタ

ユーザーエージェントは、不明なセレクタを持つルールを無視することが要求されます。参照 セレクタレベル3 :

a グループ を含むセレクタは無効である。

だから、ブラウザごとに別々のルールが必要なのです。そうしないと、グループ全体がすべてのブラウザで無視されることになります。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">

使用上の注意

• コントラストが悪くならないように注意してください。Firefox のプレースホルダーはデフォルトで不透明度が低くなっているようです。 opacity: 1 ここで
• プレースホルダーのテキストは、サイズが合わないと切り捨てられることに注意してください。 em で、最小フォントサイズを大きく設定してテストしてください。翻訳をお忘れなく：いくつかの言語では スペースが必要 同じ単語を
• をサポートするHTMLを持つブラウザは placeholder がCSSでサポートされていない場合(Operaなど)もテストする必要があります。
• ブラウザによっては、一部の input タイプ ( email , search ). これらはレンダリングに予期せぬ影響を与える可能性があります。そのため プロパティ -webkit-appearance と -moz-appearance で変更できます。例

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }