HTML/CSSを用いた浮動小数点型入力プレースホルダ

入力がフォーカスを受けるとき、プレースホルダが「なる」ラベルを作るクールな方法は、ここにあります.
これが最終結果のペンです.
まず、あなたはlabel アフターinput HTMLで.

<form action="">
  <input type="text" id="fullName" name="fullName">
  <label for="fullName">Full Name</label>
</form>

これは、我々はターゲットを確保することができますlabel 我々のCSSで.
そして、その代わりにinput エーplaceholder HTMLで直接、私たちはlabel プレースホルダとして.…のためにlabel 中に入るinput , 私たちはtransform: translate() . 我々はまた、実際にそれがネイティブプレースホルダーのように見えるようにライターの色を使用することができます.
初期状態のための関連するCSSはここにあります(翻訳に使用される値はフォントサイズ、ポジショニングなどによって変化することができます).

    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }

今、テキストの上に位置するときにinput がフォーカスされている場合は、次のように使用します.

    input:focus + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }

動く!
しかし、我々にはまだ問題があります.スタイルは、label 時input 焦点が合っている.つまり、input その後、他の場所にフォーカスlabel それは元の位置に戻ってくる.
これを修正するには、:placeholder-shown セレクタ.このセレクタは、input 's placeholder そうです.我々のケースでは、我々は実際にスタイルlabel 時placeholder が表示されませんので、また、:not() セレクタ.最後に、これは動作するためにinput プレースホルダを持たなければなりません.我々は我々を使用したいのでlabel としてplaceholder テキストとして、単に空のスペースをplaceholder 値(空の文字列)"" は動作しません).

<form action="">
  <input type="text" id="fullName" name="fullName" placeholder=" ">
  <label for="fullName">Full Name</label>
</form>

    input:focus + label,
    input:not(:placeholder-shown) + label  {
      color: #111;
      transform: translate(0, -2.75rem);
    }

現在、すべては我々がそれが欲しいように働きます.
The :placeholder-shown セレクタは比較的新しいですが、ブラウザのサポートはかなり良いです.それを認識しない唯一のブラウザはエッジです.これを解決するために、我々は@supports クエリハックは、コードがエッジで実行されているかどうかを確認しますhttp://browserhacks.com/ ).
通常、このハックは、エッジでサポートされている書き込みコードを使用します.我々が反対を望むので、我々は加えることができますnot クエリの条件の前に.
また、最終的な位置をlabel 何よりも先に.この方法では、エッジブラウザは通常のフォームのように入力の上にラベルを表示し、他のブラウザは「プレースホルダ」スタイルを適用します.

label {
  display: block;
  transform: translate(0, -2.75rem);
}

@supports (not (-ms-ime-align:auto)) {
    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }

    input:focus + label,
    input:not(:placeholder-shown) + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }
}

このクールなフォームスタイルのもう一つの可能性はlabel ユーザーが何かをタイプするとき.このためには、単にinput:focus + label セレクタ.これがその結果です.
私はあなたがこの便利な発見!コメントで知らせてください.