CSSのみでフローティングラベルを実装する方法

JavaScriptを使わずに、CSSのみでフローティングラベルを実装する方法。

HTML5が目指すところのセマンティクスの概念やユーザービリティといったところからは離れる、あくまでもデザイン優先の実装方法。

<label> をプレイスホルダー文字列として使う

HTMLで <input> と <label> を紐付けたいとき、多くの場合は以下のようにするかと思います。

<label>foo: <input></label>

<label for="bar">bar: </label>
<input id="bar">

また、 <input> にプレイスホルダー文字列を表示させたい場合は、

<input placeholder="foobar">

のようにすることができます。この placeholder="foobar" の代わりに <label> 要素を使います。

:placeholder-shown 疑似クラスはプレイスホルダー文字列が表示されている要素を指します。これと否定を意味する疑似クラス :not() を組み合わせて、「プレイスホルダー文字列が表示されていないとき」にスタイルを適用するようにします。

<label>
  <input>
  <span>label text</span>
</label>

のようなHTMLがあった場合、CSSを以下のようにします。

label {
  position: relative;
}
span {
  position: absolute;
  top: 0;
  left: .25rem;
}

これでラベルテキストを <input> の上にかぶせるようにして配置し、ラベルテキストがプレイスホルダー文字列であるように見せます。

つぎに、

input + label {
  transition: all 0.2s ease;
}
input:not(:placeholder-shown) + span {
  transform: scale(.75) translateX(-1rem) translateY(-1rem);
}

のようにすることで、 input:not(:placeholder-shown) である場合、つまりプレイスホルダー文字列が表示されていない場合に大きさを75%に縮小し、位置を左上に移動させます。

:placeholder-shown 疑似クラスを使った方法は以上です。