:placeholder-shown

: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 {

　　opacity: 1;

　　color: #cccccc;

　　background: #f0f8ff;

　　font-weight: bold;

　　border: 1px solid red;

}

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

CSSだけでアスペクト比を固定

viewportの指定