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

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。

一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。

下記のデモはJavaScriptは無し、CSSのみで実装されています。

input :not(:placeholder-shown)

フローティングラベルの挙動は、フォーカスがはずれている時は入力欄に表示され、フォーカスがあたった時は入力欄の上に表示されます。

フォーカスがはずれている時とあたった時

:placeholder-shown疑似クラスとは、プレイスホルダーが有効なフォーム要素を選択し、そこにスタイルを適用できます。
参考: :placeholder-shown -Selectors Level 4

デモでは、否定疑似クラス「:not」と組み合わせて、ラベルのテキストを移動・変形させ、カラーを変更しています。
参考: 否定疑似クラス「:not」の便利な使い方と使う時の注意点

HTML

フォームはinput要素、ラベル、ボーダーで構成されています。

CSS

各要素を「position: absolute;」にし、フローティングラベルは「input:not(:placeholder-shown) + span」と「input:focus + span」で実装します。

「:placeholder-shown」は主要なモダンブラウザでサポートされていますが、IE, Edgeは未サポートです。

「:placeholder-shown」のサポートブラウザ

ポリフィルも利用できます。

• HTML5 placeholder Polyfill

実際の動作は、下記ページでご覧ください。
フローティングラベルは、非常に軽快に動作します。