:placeholder-shown 疑似クラス

テキストボックス、テキストエリアのように、プレイスホルダーを設定することができる要素です。プレイスホルダーのテキストは HTMLでplaceholder属性で設定可能ですが、HTML上だけでなくCSSの:placeholder-shown擬似クラスを使ってスタイルを充てることが可能です。

:placeholder-shown {
  opacity: 1;
  color: #ff0000;
  background: #f0f0f0;
  font-weight: bold;
  border: 2px solid red;
}

:placeholder-shownはインプット要素全体に対してcssが適用されます。
:を二つ重ねた::placeholder擬似要素は、プレイスホルダーテキストのみにcssが適用されます。

input::placeholder {
  color: #fff;
  background: #f00;
  font-weight: bold;
}

:not()と組み合わせることで、フォーカス時に下記のような挙動も可能になります。