CSS implementiert den Texteingabefeldstil von Google Material Design (empfohlen)

Hallo zusammen, heute möchte ich Ihnen zeigen, wie Sie mit reinem CSS den Stil des Texteingabefelds von Google Material Design implementieren.

Obwohl uns heute viele Frameworks zur Verfügung stehen, die uns bei der Implementierung dieser Stile helfen können, können wir unsere Fähigkeit verbessern, diese Framework-Komponenten in Zukunft entsprechend den Geschäftsanforderungen anzupassen, indem wir lernen, wie man reines CSS auf der untersten Ebene verwendet.

Demo, siehe hier: Klicken Sie hier, um Demo anzuzeigen [CodePen]

Endergebnis:

Nur im Chrome-Browser getestet. Wenn Sie Probleme mit anderen Browsern feststellen, können Sie gerne Änderungsmethoden vorschlagen und gemeinsam lernen und sich verbessern!

Beginnen Sie mit der Umsetzung

Zuerst erstellen wir das folgende HTML:

<form>
  <input type="text" erforderlich />
  <Bezeichnung>
    <span>Benutzername</span>
  </Bezeichnung>
</form>

Dies ist ein normales HTML-Formular zur Eingabe eines Benutzernamens.

Ich glaube, dass jedem, der schlau ist, aufgefallen ist, dass wir das <label>-Tag nach dem <input>-Tag einfügen, weil wir das <label> später basierend auf dem Status des <input>-Tags auswählen müssen. Es handelt sich jedoch um Geschwister, und da reine CSS-Selektoren nur eine Möglichkeit bieten, das nächste Geschwister auszuwählen, setzen wir das <label>-Tag ans Ende.

Effektbild:

Als Nächstes passen wir die CSS-Effekte des <form>-Elements an.

bilden {
  Breite: 50%;
  Höhe: 50vh;
  Rand: automatisch;
  Position: relativ;
  Schriftfamilie: Sans-Serif;
}

Dieser CSS-Abschnitt ist nichts Besonderes, er definiert lediglich Länge, Höhe und Schriftart.

Als nächstes fügen wir dem <input>-Element einige Stile hinzu.

Formulareingabe {
  Höhe: 2rem;
  Breite: 10rem;
  Rand: keiner;
  Rand unten: 0,1rem tiefschwarz;
}

Dieser CSS-Abschnitt legt hauptsächlich die Länge und Breite fest und legt nur den Rahmen darunter fest, um ihm ein unterstrichenes Gefühl zu verleihen.

Effektbild:

Als nächstes müssen wir das <label>-Tag festlegen, das den Benutzernamentext über das Texteingabefeld verschiebt.

Formularbezeichnung {
  Position: absolut;
  oben: 0;
  links: 0;
  Zeigerereignisse: keine;
}

Es ist erwähnenswert, dass wir Folgendes festlegen:

pointer-events: none;

Es ist zu hoffen, dass in Zukunft beim Klicken mit der Maus auf den Text anstelle des Schriftartauswahlereignisses das Fokusereignis des Texteingabefelds ausgelöst werden kann.

Effektbild:

Als nächstes müssen wir padding-top zum <input>-Element hinzufügen. Dadurch wird der <label>-Benutzername etwas nach oben verschoben.

Als Nächstes fügen wir dem <input>-Element outline: none hinzu, sodass der blaue Rand nicht mehr angezeigt wird, wenn wir auf das Texteingabefeld klicken.

Formulareingabe {
  Höhe: 2rem;
  Breite: 10rem;
  padding-top: 1rem; /* Neu */
  Rand: keiner;
  Rand unten: 0,1rem tiefschwarz;
  Gliederung: keine; /* Neu */
}

Effektbild:

Als Nächstes müssen wir einen unteren Rahmenstil auf das Pseudoelement ::after nach dem <input>-Element anwenden und den unteren Rahmen nach links verschieben.

Der Grund für das Verschieben des unteren Rands nach links ist, dass er in Zukunft durch overflow:hidden; ausgeblendet wird. Nur wenn das Texteingabefeld ausgewählt ist, wird der untere Rand zurückgeschoben, um die visuelle Wirkung zu verbessern.

Formularbezeichnung::nach {
  Inhalt: ""; /* Das ist sehr wichtig, wir brauchen dieses Attribut, um den unteren Rand anzuzeigen*/
  Höhe: 3rem;
  Breite: 10rem;
  Position: absolut;
  oben: 0;
  links: 0;
  border-bottom: 0.2rem solid #1cb9b6; /* Der untere Rand muss markanter sein, also machen wir ihn fett und färben ihn*/
  transform: translateX(-100%); /* 100 % nach links verschieben, um sicherzustellen, dass es sich außerhalb des Formularelements befindet*/
  Übergang: alle 0,3 s langsam; /* Animation hinzufügen, um flüssige Bewegung zu erreichen */
}

Effektbild:

Als nächstes wollen wir das <label>-Element „Benutzername“ nach unten verschieben, direkt an den unteren Rand.

Formularbezeichnungsspanne {
  Position: absolut;
  unten: -3rem;
  links: 0;
  Übergang: alle 0,3 s langsam; /* Animation zum Erreichen eines sanften Bewegungseffekts*/
}

Effektbild:

Als Nächstes müssen wir das <input>-Element formatieren, wenn es sich im fokussierten und gültigen Zustand befindet. Das heißt, wenn wir das Texteingabefeld auswählen oder wenn sich Text im Texteingabefeld befindet, sollten diese hervorgehoben werden.

Der Grund, warum wir hier den gültigen Status verwenden können, besteht darin, dass wir in HTML das erforderliche Attribut für <input> festlegen. Wenn sich also Text im Texteingabefeld befindet, ist dieser in einem gültigen Status und umgekehrt.

<input type="text" erforderlich />
Formulareingabe: Fokus + Beschriftungsspanne,
Formulareingabe: gültig + Bezeichnungsspanne {
  transform: translateY(-120%); /* Benutzernamen nach oben verschieben*/
  font-size: 1.2rem; /* Erhöhen Sie die Schriftgröße, um den Highlight-Effekt hervorzuheben*/
  Farbe: #1cb9b6; /* Hervorhebungsfarbe*/
}
Formulareingabe: Fokus + Label::nach,
Formulareingabe:gültig + Bezeichnung::nach {
  transform: translateX(0); /* Verschiebe den markierten unteren Rand nach links nach hinten*/
}

Effektbild:

Als nächstes müssen wir den unteren Rand verbergen, der links inaktiv ist, wenn er nicht hervorgehoben ist. Wir müssen nur overflow: hidden; auf dem <form>-Element festlegen.

bilden {
  Breite: 50%;
  Höhe: 50vh;
  Rand: automatisch;
  Position: relativ;
  Schriftfamilie: Sans-Serif;
  Überlauf: versteckt; /* Neu */
}

Wenn es nicht ausgewählt oder nicht eingegeben ist, ist der hervorgehobene untere Rand links unsichtbar.

Effektbild:

Auf diese Weise haben wir das Texteingabefeld der Google Material Design-Spezifikation fertiggestellt.

Zusammenfassen

Oben sehen Sie die vom Herausgeber eingeführte CSS-Implementierung des Texteingabefeldstils von Google Material Design. Ich hoffe, es ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!