CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。 一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。 下記のデモはJavaScriptは無し、CSSのみで実装されています。

[coliss]

:placeholder-shown疑似クラスで、フローティングラベルを実装

[silossowski]

placeholderに"お名前"とか"メールアドレス"とか入れるのが正解なのか？みたいなのもあって、labelはlabelとして置いといて、placeholderには入力形式の例とかを表示しておいたほうがいいんじゃないのかなとは思う

[kosn]

IEはもう諦めたけどEdgeさんはもう少し頑張ってほしい

[sigwyg]

“主要なモダンブラウザでサポートされていますが、IE, Edgeは未サポートです。”

[d4-1977]

:placeholder-shown疑似クラスって知らなかった。そんなのもあるのか。

[mami-hate]

IE,Edge対応してえええ

[headless_pasta]

あ、確かにこれあるとフローティングラベル作るの超楽だな。

[rti7743]

面白い。css transformが最初に出てきたときは、IE5.5のfilter再実装かよ、そもそもfilterなんて重いし使いみちないから誰も使わないよと思っていたけど、それは完全に俺様の間違いだった。ごめんご。遺憾の意を表したい。

[solidstatesociety]

そもそもplaceholder要素じゃないのがひっかかる。

[aoiasaba]

かっこいい

[kathew]

ハック的なもの特有の気持ち悪さはある。テクニックとして覚えておこう

[tsuki-rs]

うーむ

[o_ti]

placeholder=" " がキモすぎなんで、せめてこんな感じでお願いします http://jsfiddle.net/3uvmLjf6/1/

[ohbarye]

マテリアルデザインでよく見るけどどう実装されているか知らなかった

[kicchysan]

CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる #CSS #JavaScript https://coliss.com/?p=23885