入力フォームでどこになにを入力するかを分かりやすく指示するプレースホルダですが、入力途中でフォーカスしたままふと考えごとをして、入力に戻ったら、何を入力するところか分からなくなる、といったことが稀にあります。フォーカスを外せばまたプレースホルダテキストが表示されるので、直ぐに分かりますが、このCSSを使うと、プレースホルダテキストをフローアップラベルとして常に表示してくれます。

同じ参照元で、jQueryプラグインを使ったものをメインに配布されていて、そちらの動作(フローアップ)も興味深いのですが、今回はCSSのみのものを使ってみました。

サンプルフォーム

※参照元:https://github.com/ENFOS/flowupLabels.js
戻るボタン