CSS を使用して HTML 入力のプレースホルダーの色を変更する

Question

<p>Chrome v4 は、<code>input[type=text]</code> 要素のプレースホルダー属性をサポートします (他のものでも同様の可能性があります)。 </p> <p>ただし、次の CSS はプレースホルダー値に対して何も行いません: </p> <p><br /></p> <pre class="brush:css;toolbar:false;">input[プレースホルダー], [プレースホルダー], *[プレースホルダー] { 色: 赤!重要; }</pre> <pre class="brush:html;toolbar:false;"><input type="text" placeholder="Value"></pre> <p><br /></p> <p>value は、red ではなく、grey のままになります。 </p> <p><strong>プレースホルダーのテキストの色を変更する方法はありますか? </strong></p>

Answer 1

リーリー リーリー

これにより、すべての input および textarea プレースホルダーのスタイルが設定されます。

重要な注意: これらのルールをグループ化しないでください。代わりに、セレクターごとに個別のルールを作成します (グループ内の無効なセレクターはグループ全体を無効にします)。

Answer 2

＃＃＃実装＃＃＃

疑似要素、疑似クラス、なしの 3 つの異なる実装があります。

WebKit、Blink (Safari、Google Chrome、Opera 15) および Microsoft Edge は、疑似要素

::-webkit-input-placeholder
• を使用します。 ＃＃＃[＃＃＃参照する＃＃＃]＃＃＃＃＃＃ Mozilla Firefox 4 ～ 18 では、疑似クラス: :-moz-placeholder ^{(a コロン) を使用します。 ＃＃＃[＃＃＃参照する＃＃＃]＃＃＃＃＃＃} Mozilla Firefox 19 は疑似要素
::-moz-placeholder
• を使用しますが、古いセレクターはしばらくの間は引き続き機能します。 ＃＃＃[＃＃＃参照する＃＃＃] ＃＃＃＃＃＃ Internet Explorer 10 および 11 は、疑似クラス: :-ms-input-placeholder を使用します。 ＃＃＃[＃＃＃参照する＃＃＃] ＃＃＃＃＃＃ 2017 年 4 月: ^{最新のブラウザーのほとんどは、単純な疑似要素 ::placeholder} [
Ref
• ] ^{Internet Explorer 9 以前では、placeholder} 属性がまったくサポートされておらず、
Opera 12 以前では、
• プレースホルダー CSS セレクターがサポートされていません。 最良の実装オプションに関する議論は継続します。疑似要素は、DOM ^{の シャドウ内の実際の要素と同様に動作することに注意してください。 input} の
padding
• は、疑似要素と同じ背景色を取得しません。 CSSセレクター ^{ユーザー エージェントは、不明なセレクターを含むルールを無視する必要があります。 セレクター レベル 3:} を参照してください。 したがって、ブラウザごとに個別のルールを開発する必要があります。そうしないと、グループ全体がすべてのブラウザによって無視されます。

リーリー リーリー