<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これにより、すべての
inputおよびtextareaプレースホルダーのスタイルが設定されます。重要な注意: これらのルールをグループ化しないでください。代わりに、セレクターごとに個別のルールを作成します (グループ内の無効なセレクターはグループ全体を無効にします)。
＃＃＃実装＃＃＃
疑似要素、疑似クラス、なしの 3 つの異なる実装があります。
WebKit、Blink (Safari、Google Chrome、Opera 15) および Microsoft Edge は、疑似要素::-webkit-input-placeholder- を使用します。 ＃＃＃[＃＃＃参照する＃＃＃]＃＃＃＃＃＃
::-moz-placeholder- を使用しますが、古いセレクターはしばらくの間は引き続き機能します。 ＃＃＃[＃＃＃参照する＃＃＃] ＃＃＃＃＃＃
Ref- ]
Opera 12 以前では、- プレースホルダー CSS セレクターがサポートされていません。
padding- は、疑似要素と同じ背景色を取得しません。
リーリー リーリーMozilla Firefox 4 ～ 18 では、疑似クラス::-moz-placeholder (a コロン) を使用します。 ＃＃＃[＃＃＃参照する＃＃＃]＃＃＃＃＃＃ Mozilla Firefox 19 は疑似要素Internet Explorer 10 および 11 は、疑似クラス::-ms-input-placeholder を使用します。 ＃＃＃[＃＃＃参照する＃＃＃] ＃＃＃＃＃＃ 2017 年 4 月: 最新のブラウザーのほとんどは、単純な疑似要素 ::placeholder [Internet Explorer 9 以前では、placeholder 属性がまったくサポートされておらず、CSSセレクターユーザー エージェントは、不明なセレクターを含むルールを無視する必要があります。 セレクター レベル 3: を参照してください。 したがって、ブラウザごとに個別のルールを開発する必要があります。そうしないと、グループ全体がすべてのブラウザによって無視されます。