1. ホーム
  2. css

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

2022-04-15 12:22:03

質問

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;
    }