Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
セレクター Widely available

:placeholder-shown

:placeholder-shownは、フォーム要素のプレースホルダーが表示されている状態（つまりユーザーがまだ値を入力していない状態）を選択する擬似クラスです。::placeholderがプレースホルダーテキスト自体を選択するのに対し、こちらは入力要素そのものを選択します。フローティングラベルパターンの実装やフォームの入力状態に応じたスタイル切り替えに活用されます。

擬似クラスフォーム

概要

:placeholder-shownは、フォーム要素のプレースホルダーが表示されている状態（つまりユーザーがまだ値を入力していない状態）を選択する擬似クラスです。::placeholderがプレースホルダーテキスト自体を選択するのに対し、こちらは入力要素そのものを選択します。フローティングラベルパターンの実装やフォームの入力状態に応じたスタイル切り替えに活用されます。

対応ブラウザ

デスクトップ

Chrome 47+
Edge 79+
Safari 9+
Firefox 51+

モバイル

Chrome Android 47+
Safari iOS 9+
Firefox Android 51+

基本構文

CSS 
input:placeholder-shown + label {
  transform: translateY(0);
  opacity: 0.5;
}
input:not(:placeholder-shown) + label {
  transform: translateY(-20px);
  font-size: 0.75rem;
}

実務での使いどころ

  • フローティングラベルの実装

    ユーザーが入力を開始するとラベルが上方に移動するフローティングラベルパターンをCSS単体で実現します。

注意点

  • placeholder属性が空または未設定の場合、:placeholder-shownは一致しません。この擬似クラスを使う場合はplaceholder属性の設定が必須です。

アクセシビリティ

  • フローティングラベルの実装時は、ラベルのフォントサイズが小さくなりすぎないよう、読みやすさを維持してください。

参考リンク