Einführung in Floating Labels in CSS (mit Groß-/Kleinschreibung)

Dieser Artikel bietet Ihnen eine Einführung in Floating Labels in CSS (mit Beispielen). Ich hoffe, dass er Ihnen als Referenz dienen wird.

Im Webprojekt gibt es ein sehr wichtiges Modul, das Anmelde-/Registrierungsmodul. Der Hauptteil dieses Moduls ist ein Formular. Dieses Formular enthält jeweils zwei wichtige Eingabegruppen Die Eingabegruppe enthält Beschriftung und Eingabe, und es gibt verschiedene Layoutpläne für Beschriftung und Eingabe. Verschiedene Designer haben unterschiedliche Designstile und unterschiedliche Front-End-Ingenieure haben unterschiedliche Implementierungsmethoden. Durch einen Vergleich haben wir herausgefunden, dass die aktuelle Lösung sowohl auf Ästhetik als auch auf Leistung ausgerichtet ist.

Also, was sind die Layoutpläne für Etikett und Eingabe?

Der Layoutplan für Etikett+Eingabe

1. wird Beschriftung und Eingabe (Palcholder-Schlüsselwort-Eingabeaufforderung) sind in obere und untere Teile unterteilt. // Vor langer Zeit verwendet, verwenden Sie jetzt gelegentlich

2. , um Beschriftung und Eingabe (Palcholder-Schlüsselwort-Eingabeaufforderung) zu unterteilen linker und rechter Teil (das Etikett nimmt eine bestimmte Breite ein und die Schriftart im Etikett verwendet drei gängige Lösungen: linksbündig, rechtsbündig und an beiden Enden ausgerichtet); // Fall: Weibo-Anmeldung, JD-WAP-Anmeldeseite usw.

3. Die Beschriftung und die Eingabe (Palcholder-Schlüsselwort-Eingabeaufforderung) sind weiterhin in einen linken und einen rechten Teil unterteilt. Der Unterschied besteht darin, dass die Schriftart in der Beschriftung durch ein Symbol ersetzt wird. Fall: Segmentfehler-Community-Anmeldeseite usw.

4. Enthält nur Eingaben (Palcholder-Schlüsselworthinweis); // Fälle: Mobile Taobao-Anmeldeseite, Nuggets-Entwicklungs-Community-Anmeldeseite usw.

5. Zeigt nur die Eingabe an (Palcholder-Schlüsselwort-Eingabeaufforderung), und die Beschriftung wird schwebend und ausgeblendet. Wenn das Fokusereignis der Eingabe ausgelöst wird, wird die Beschriftung angezeigt. // Fall: die vorherige Anmeldeseite von mobilem Taobao oder siehe JVFloatLabeledTextField usw.

Jede dieser Lösungen hat ihre eigenen Vor- und Nachteile. Die Verwendung und Ersetzung der Etikettenschriftart Ein Symbol ist lebendiger, aber die Anzahl der Schriftarten im Etikett ist inkonsistent und die Anzahl der Wörter ist gleich. Diese Lösung kann nur als zufriedenstellend bezeichnet werden kann die Benutzeroberfläche einfach und schön machen, aber das Etikett hat die Funktion eines Etiketts (wird weiter unten im Detail besprochen), die Verwendung eines schwebenden Etiketts erhöht den Animationseffekt, erfordert jedoch die Einführung von js. Die Leistung dieser Lösung ist offensichtlich höher als die Nichtverwendung von js (es gibt eine Lösung, die js nicht verwendet, aber die Kompatibilität ist nicht sehr gut).

Label vs. Platzhalter

Label: Beschreibt die Rolle des Formularelements, das zur Angabe der Eingabe verwendet wird, ist der eindeutige Feldname

Platzhalter: Es fordert den Benutzer auf, das Format des Inhalts einzugeben

Die beiden scheinen ähnlich zu sein, aber ihre Verantwortlichkeiten sind unterschiedlich. Viele Schüler haben hier große Fehler gemacht.

Wenn Sie mehr darüber erfahren möchten, wenden Sie sich bitte an MDN.

Animierte Beschriftung (no-js)

Seite für Benutzerinteraktion Gleichzeitig ist es durch die Benutzerinteraktion mit Animationen oft einfacher, Benutzer zu beeindrucken. Im Folgenden wird ein Floating-Label vorgestellt, das mithilfe von Pseudoklassen implementiert wird.

HTML-Code:

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

CSS-Code für das Basislayout:

.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;
}

Legen Sie zunächst die Position der Beschriftung fest (Position: absolut) und definieren Sie ihre Ebene (Z-Index: -1), Sichtbarkeit: ausgeblendet, Transparenz (Deckkraft: 0);

Dann wird der Platzhalterstil der Eingabe festgelegt und das Pseudoelement::placeholder kann verwendet werden, um seinen Stil festzulegen;

Abschließend wird ein Übergangsanimationseffekt festgelegt, wenn die Beschriftung des Eingabeelements den Fokus erhält. Die Pseudoklasse: focus wird verwendet, um den Schattenstil (Box-Shadow) und den Umrissstil (Outline) zu definieren, wenn die Beschriftung des Eingabeelements den Fokus erhält .

Stil des schwebenden Beschriftungseffekts

 .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);
}

Fügen Sie in der Sammlung, die den Beschriftungsstil definiert, seinen anfänglichen Transformationsverformungseffekt hinzu, legen Sie den Übergangseffektstil fest und definieren Sie dann, wann die Eingabe den Fokus erhält Verwenden Sie einfach den Stil der Beschriftung des Geschwisterelements.

Der Effekt dieses schwebenden Etiketts unterscheidet sich von dem von JVFloatLabeledTextField. Ersteres erhält den Fokus und das Etikett beginnt sofort zu schweben, während letzteres der Fall ist, wenn der Benutzer Inhalte eingibt (d. h. wenn der Platzhalter verschwindet). , das Etikett beginnt zu schweben.

Damit beide den gleichen Effekt haben, können wir die Funktion verwenden, dass Pseudoklassen verschachtelt werden können, und das Label .input-group>input:focus ~ in .input-group>input:focus:not( ändern. :placeholder -shown) ~ label, hier: placeholder-shown kann den sichtbaren und versteckten Effekt des Platzhalters definieren, aber seine Kompatibilität ist nicht sehr gut, dh/edge unterstützt es überhaupt nicht, Chrome, Safari und Firefox können es. Fall: Demo

Das obige ist der detaillierte Inhalt vonEinführung in Floating Labels in CSS (mit Groß-/Kleinschreibung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!