入力フォームのラベルをフワッと浮かせるパターンの別解

Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また

[tarchan]

クリックしたときと入力位置がずれる悪いデザインだね

[gae]

入力済みのテキストを選択しようとする→テキストが逃げる。良いとは思えない

[Falky]

うーん、入力欄が動くのほんと無理な人間だからコレは厳しい。でも元ネタのプレースホルダの問題もわかる。うーん

[ko-ya-ma]

> ラベルとプレースホルダーを混同させずに両立させる

[celt69cobra]

かっこいい。

[cho45]

かっこいい〜〜〜