CSSのフローティングラベル入門（ケース付き）

この記事では、CSS のフローティング ラベルについて説明します (例を示します)。必要な方は参考にしていただければ幸いです。

Web プロジェクトには、ログイン/登録モジュールという非常に重要なモジュールがあります。このモジュールの主要部分はフォーム フォームであり、2 つの重要な入力グループ (ユーザー名/パスワード) が含まれています。各入力グループにはラベルと入力が含まれており、ラベル入力にはさまざまなレイアウト プランがあり、設計者によって設計スタイルが異なり、フロントエンド エンジニアによって実装方法が異なります。比較を通じて、現在のソリューションは美しさとパフォーマンスの両方に焦点を当てていることがわかりました。

それでは、ラベルと入力のレイアウト計画は何でしょうか?

ラベル入力のレイアウト計画

1. ラベルと入力を置き換えます。 input (palcholder キーワード プロンプト) は上部と下部に分かれています。 // 昔は使用されていましたが、現在は

2. を使用してラベルと input (palcholder キーワード プロンプト) を左と下部に分割します。右側の部分 (ラベルは一定の幅を占め、ラベル内のフォントは左揃え、右揃え、両端揃えの 3 つの一般的な解決策を採用します) // ケース: Weibo ログイン、JD WAP ログイン ページなど。

3. ラベルと入力 (palcholder キーワード プロンプト) は依然として左側と右側の部分に分かれています。違いは、ラベル内のフォントがアイコンに置き換えられることです。フォールト コミュニティ ログイン ページなど

4. 入力 (パルホルダー キーワード プロンプト) のみが含まれます。 // ケース: モバイル タオバオ ログイン ページ、Nuggets 開発コミュニティ ログイン ページなど

5. 入力 (パルホルダー キー) の単語プロンプトのみを表示し、入力のフォーカス イベントがトリガーされると、ラベルがフローティングされて非表示になります。 // ケース: モバイル淘宝網の以前のログイン ページ、または JVFloatLabeledTextField などを参照してください。

これらのソリューションには、ラベル フォントの使用とアイコンへの置き換えにはそれぞれ利点と欠点があります。より鮮やかですが、アイコンが追加されています URL アクセス; ラベル内のフォントの数が一貫しておらず、見苦しいですが、単語の数は同じです。 この解決策は、ラベルを直接破棄することでのみ満足できるものと言えます。インターフェイスはシンプルで美しいですが、ラベルにはラベル (詳細は後述) とプレースホルダーの機能があります。フローティング ラベルを使用するとアニメーション効果が高まりますが、このソリューションのパフォーマンスは明らかに高くなります。 js を使用しない場合よりも優れています (js を使用しない解決策もありますが、互換性はあまり良くありません)。

label と placholder

label: 入力が一意のフィールド名であることを指定するために使用されるフォーム要素の役割を説明します。

placeholder: それユーザーにコンテンツの形式を入力するように促します。

これらは似ているように見えますが、多くの学生がここで大きな間違いを犯しています。

詳細については、MDN

アニメーション ラベル (no-js)

ユーザー インタラクション ページを参照してください。アニメーションを使用したユーザー インタラクションは、多くの場合、ユーザーに好印象を与えやすいものです。以下に、疑似クラスを使用して実装されたフローティング ラベルを紹介します。

HTML コード:

<div class="input-group">
    <input type="text" id="userName" placeholder="用户名/邮箱/卡号">
    <label for="userName">账号</label>
</div>

基本レイアウト CSS コード:

.input-group {
    position: relative;
    margin: 100px 20px;
    font-size: 16px;
}

.input-group>input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    line-height: 1.0;
    border: none;
    border-bottom: 1px solid #cdcdcd;
    border-radius: 0.4em;

    transition: box-shadow 0.3s;
}

.input-group input::placeholder {
  color: #cdcdcd;
}

.input-group>input:focus {
    outline: none;
    box-shadow: 0.2em 0.8em 1.6em #cdcdcd;
}

.input-group>label {
    position: absolute;
    bottom: 50%;
    left: 0;
    z-index: -1;
    
    visibility: hidden;
    color: #050505;
    opacity: 0;
}

まず、ラベルの位置 (位置: 絶対) を設定し、そのレベル (z-インデックス: -1)、可視性: 非表示、透明度 (不透明度: 0);

次に、入力のプレースホルダー スタイルが設定され、擬似要素::プレースホルダーを使用してそのスタイルを設定できます。

最後に、入力要素のラベルがフォーカスを取得すると、擬似クラス:focus を使用して影のスタイル (box-shadow) と輪郭のスタイル (outline) が定義されます。集中。

ラベル フローティング エフェクト スタイル

 .input-group>label {
      ...

      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translate3d(0, 0, 0) scale(0);
              transform: translate3d(0, 0, 0) scale(0);
      -webkit-transition:
          opacity 0.3s,
          visibility 0.3s,
          transform 0.3s,
          z-index 0.3s;
          
              transition:
                  opacity 0.3s,
                  visibility 0.3s,
                  transform 0.3s,
                  z-index 0.3s;
 }

.input-group>input:focus ~ label {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, -36px, 0) scale(1);
        transform: translate3d(0, -36px, 0) scale(1);
}

ラベル スタイルを定義するコレクションで、その初期トランスフォーム デフォメーション エフェクトを追加し、トランジション トランジション エフェクト スタイルを設定して、入力がフォーカスを取得するタイミングを定義します。兄弟要素のラベルのスタイルを使用するだけです。

このラベルのフローティングの効果は、JVFloatLabeledTextField の効果とは異なります。前者はフォーカスを取得してラベルがすぐにフロートし始めますが、後者はユーザーがコンテンツを入力したとき (つまり、プレースホルダーが消えたとき) に開始します。

この 2 つを同じ効果にするために、疑似クラスをネストできる機能を使用し、 .input-group>input:focus ~ label を .input-group>input:focus:not( :placeholder -shown) ~ label、ここ: placeholder-shown はプレースホルダーの表示効果と非表示効果を定義できますが、その互換性はあまり良くありません。ie/edge はそれをまったくサポートしませんが、chrome、safari、Firefox はサポートします。ケース: デモ

以上がCSSのフローティングラベル入門（ケース付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。