:placeholder-shown
テキストボックス、テキストエリアのように、プレイスホルダーを設定することができる要素です。
プレイスホルダーのテキストは HTMLでplaceholder属性で設定可能ですが、
HTML上だけでなくCSSの:placeholder-shown擬似クラスを使ってスタイルを充てることが可能です
:placeholder-shown { opacity: 1; color: #cccccc; background: #f0f8ff; font-weight: bold; border: 1px solid red; }
この:placeholder-shownはインプット要素全体に対してcssが適用されます。
また、:を二つ重ねた::placeholder擬似要素は、プレイスホルダーテキストのみのcssが適用されます。