CSSは、入力ボックスのフローティングテキスト効果を実現するために、placeholder-shown疑似クラスを使用します。

この記事では、:placeholder-shown 疑似クラスを使用して、純粋な CSS で浮動疑問符効果を作成します。

フローティングテキストラベル

入力ボックスを扱う際には、ユーザーにより良い体験を提供できるよう最善を尽くします。よく使用されるタグ属性は 2 つあります。

ラベルタグは、フォーム要素に関連付けられた説明情報を提供するのに最適な要素です。
入力ボックスのプレースホルダー属性を使用すると、入力が行われていないときに <input> 要素内に表示されるテキストを指定できます。説明やヒントではなく、サンプルテキストを表示するために使用されます。
これら 2 つのラベルプロパティを組み合わせると、「フローティングテキストラベル」効果を作成できます。これは具体的には次のことを意味します。

まず、ユーザーには、いくつかのサンプルの質問を表示するプレースホルダー属性を持つ入力タグが表示されます。ラベル要素はデフォルトでは非表示になっています。
入力ボックスがアクティブになり、入力を開始すると、ラベル要素が入力ボックスの上に表示されます。
入力ボックスにテキストがある場合、ユーザーが入力したコンテンツを示すラベル要素が常に入力ボックスの上に表示されます。

フローティングラベルテキストを実現するための純粋なCSS

フォーカスイベントを登録し、入力に値があるかどうかを判断し、要素を非表示にし、入力ボックスにコンテンツがあるかどうかに基づいて要素を表示するかどうかを決定します。これは JavaScript の仕事のように思えますね。あまり！上記の効果を実現できる CSS 疑似クラス: placeholder-shown があるためです。 MDN はこの疑似クラスを次のように説明しています。

:placeholder-shown CSS 疑似クラスは、<input> または <textarea> 要素にプレースホルダーテキストを表示します。

つまり、入力ボックスに値がある場合は、:placeholder-shown 疑似クラスはトリガーされないと想定できます。

この疑似クラスを使用してフローティングラベルを実装する方法は次のとおりです。

HTML コードを作成し、隣接する兄弟セレクターを通じて入力要素に対応するラベルタグを選択し、2 つの要素を div でラップします。
入力、ラベル、::placeholder 疑似要素のスタイルを設定します。
ラベル要素を先頭に配置し、div 内で垂直方向に中央揃えしてから非表示にします。
:not、:focus、:placeholder-shown 疑似クラスの組み合わせにより、ラベルタグをいつ表示するかが決まります。プレースホルダーテキストが消えた場合はラベルが表示されます — input:not(:placeholder-shown) + label; 入力ボックスにフォーカスが当たり、プレースホルダーテキストが表示されない場合はラベルが表示されます — input:focus:not(:placeholder-shown) + label

上記のアイデアに従って HTML と CSS を完成させましょう。

HTMLとCSS

HTML の構造は実際には非常にシンプルで、次のようになります。

<div class="入力">
  <input type="text" id="input" class="Input-text" placeholder="あなたの名前、例：Nicholas">
  <label for="input" class="Input-label">名</label>
</div>

CSSコード:

.入力{
  /**
   * コンテナの相対的な配置は重要です。ラベル要素のフロート位置はコンテナに対して計算されるからです。*/
  位置: 相対的;
}
.入力テキスト{
  /**
   * 入力ボックスのスタイルを設定します。 フォントサイズと行の高さは、ラベルの正確な位置を決定するために非常に重要です */
  表示: ブロック;
  マージン: 0;
  幅: 100%;
  /**
   * この例では、カスタム プロパティを使用してこれらのプロパティが 1 回設定されます。
   *
   * パディング
   * フォントサイズ
   * 行の高さ
   */
}
.入力テキスト:フォーカス{
  /**
   * フォーカスを取得した際の入力ボックスのスタイル */
}
.入力ラベル{
  /**
   * ラベル要素は絶対位置に設定されており、その位置と移動距離は親要素と入力ボックスに基づいて計算されます*/
  表示: ブロック;
  位置: 絶対;
  不透明度: 0;
  /**
   * この例では、カスタム プロパティを使用してこれらのプロパティが 1 回設定されます。
   *
   * 底
   * 左
   * フォントサイズ
   * 行の高さ
   * 変身
   * 変換元
   * 遷移
   */
}
.Input-text:プレースホルダー表示 + .Input-label {
  /**
   * プレースホルダーテキストが表示されている場合は、ラベルは非表示になります
   */
  可視性: 非表示;
  Zインデックス: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
  /**
   * プレースホルダーが消えると、たとえば入力中は、ラベル要素が表示され、入力ボックスの上に浮かび上がります*/
  可視性: 可視;
  zインデックス: 1;
  不透明度: 1;
  /**
   * これらのプロパティは、カスタムプロパティを使用する例では一度設定されます*
   * 変身
   * 遷移
   */
}

完全なデモンストレーション効果

完全な HTML および CSS コードは、以下のデモリンクで確認できます。