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

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です