経緯と説明
フローティングラベルがcssだけで実装できる擬似要素、
:placeholder-shown。
なになに！ そんなんあるん？ と思って色々サーフィンし始めた、お仕事中の午後！
手始めに調べてみると、MDNさんの解説ではこう。
:placeholder-shown は CSS の擬似クラスで、プレイスホルダー文字列が表示されている または 要素を表します。
アホなワイには、この簡潔で素晴らしいテキストでは完全に理解し難い。笑
体で覚える派なので、とりあえず試しに実装してみた。
結論
input（type=text）とかtextareaに、
「値が入力されているか、されていないか」の判定を行ってるだけでした。
（placeholderあんま関係ないんかい笑）
※inputにplaceholderのattrは必要。
【補足として】
これの何がフローティングラベルに活かされるかというと、
値が入力されている限りcssが効くので、forcusが外れてもラベル位置は維持できる。
フローティングラベルの動きはcssで擬似的に作る、
んでfocusが外れることによって擬似的に作ったラベルが元の位置に戻ってしまうのを防ぐために
:not(:placeholder-shown) ※inputに値が入ってまっせ状態にして
ラベルにしている兄弟要素のspanを指定して記述ができるわけ。
なるほどやん。
またなんか機会があったら使ってみようの忘備録でした。