☰

CSSでHTML入力のプレースホルダーの色を変更する 質問する

tag-icon • tag-icon css html placeholder html-input
CSSでHTML入力のプレースホルダーの色を変更する 質問する

Chrome v4は、プレースホルダー属性要素についてinput[type=text]（おそらく他の要素も同様です）。

ただし、次の CSS はプレースホルダーの値には何も影響しません。

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Valuegreyの代わりにが残りますred。

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

ベストアンサー1

実装

実装には、疑似要素、疑似クラス、そして何もないという 3 つの方法があります。

  • WebKit、Blink (Safari、Google Chrome、Opera 15+)、Microsoft Edge は疑似要素を使用しています: ::-webkit-input-placeholder。[参照]
  • Mozilla Firefox 4 から 18 では疑似クラス:-moz-placeholder(コロン1 つ) が使用されています。 [参照]
  • Mozilla Firefox 19 以降では疑似要素 が使用されていますが::-moz-placeholder、古いセレクターもしばらくは機能します。[参照]
  • Internet Explorer 10 および 11 は疑似クラスを使用しています: :-ms-input-placeholder。[参照]
  • 2017年4月:最近のブラウザのほとんどが、シンプルな疑似要素::placeholder [参照]

Internet Explorer 9以下ではこのplaceholder属性をまったくサポートしていませんが、Opera 12以下はサポートされていませんプレースホルダー用の任意の CSS セレクター。

最良の実装についての議論はまだ続いている。擬似要素は、シャドウDOM.padding上のAinputは疑似要素と同じ背景色になりません。

CSSセレクター

ユーザーエージェントは、未知のセレクターを持つルールを無視する必要があります。セレクター レベル 3:

1つのグループ無効なセレクターを含むセレクターは無効です。

したがって、ブラウザごとに個別のルールが必要です。そうしないと、グループ全体がすべてのブラウザで無視されてしまいます。

::-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 をサポートしているが CSS をサポートしていないブラウザplaceholder(Opera など) もテストする必要があります。
  • プレースホルダーはラベルの代わりにはなりませんので、ラベルも必ず付けてください。
  • input一部のブラウザでは、一部のタイプ（email、 ）に対して追加のデフォルトCSSを使用しますsearch。これにより、予期しないレンダリングの影響を受ける可能性があります。プロパティ -webkit-appearanceそして-moz-appearanceそれを変えることです。例:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

おすすめ記事