Reines CSS zur Realisierung der Platzhalteranimation und Eingabeüberprüfung für Eingabefelder

Weitere spannende Inhalte finden Sie unter https://github.com/abc-club/free-resources

Hintergrund

Können wir ohne weiteres reines CSS verwenden, um die folgenden Effekte zu erzielen:

Die Antwort ist ja.

Dies kann mit Hilfe der Pseudoklasse css:placeholder-shown:valid:invalid und des html5-Eingabemusterattributs erreicht werden.

Die aktuelle Kompatibilität der Pseudoklasse :placeholder-shown ist wie folgt:

:placeholder-show-Kompatibilität

Direkt auf den Code! ☺️

Quellcode

https://jsbin.com/qenucaz/edit?html,css,output

html:

<!DOCTYPE html>
<html>
<Kopf>
  <meta charset="utf-8">
  <meta name="viewport" content="width=Gerätebreite">
  <title>JS Bin</title>
</Kopf>
<Text>
  <div Klasse="Eingabe-Füllfeld">
    <input class="input-fill" placeholder="E-Mail" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" erforderlich>
    <a href="javascript:" class="clear">schließen</a>
    <label class="input-label">E-Mail</label>
</div>
</body>
</html>

CSS:

.Eingabe-Füllung{
  Breite: 100 %;
  Rand: 0;
  Schriftgröße: 16px;
  Zeilenhöhe: 1,5;
  Gliederung: keine;
  Polsterung: 20px 16px 6px;
  Rand: 1px durchgehend transparent;
   Hintergrund: #f5f5fa;
  Rahmenradius: 10px;
  Übergang: Rahmenfarbe .25 s;
}
.input-fill:placeholder-shown::placeholder {
    Farbe: transparent;
    
}
.Eingabe-Füllfeld {
  Breite: 50%;
    Position: relativ;
}
.Eingabebezeichnung {
    Position: absolut;
    links: 16px; oben: 14px;
    Zeigerereignisse: keine;
    Farbe: #BEC1D9;
   Polsterung: 0 2px;
    Transform-Ursprung: 0 0;
    Zeigerereignisse: keine;
    Übergang: alle .25 s;
}
.input-fill:nicht(:Platzhalter angezeigt) ~ .input-label,
.input-fill:fokus ~ .input-label {
    transformieren: Skalierung (0,75) übersetzen (0px, -14px);    
}
.input-fill:fokus{
  Rand: 2px durchgezogen #1d31aa;
}

.klar{
  Position: absolut;
  oben: 10px;
  rechts: -20px;
   Anzeige: keine;
    Übergang: alle .25 s;
}
.input-fill::-ms-clear { Anzeige: keine; }
.input-fill:nicht(:Platzhalter angezeigt) + .clear { Anzeige: inline; }

.input-fill:gültig {
 Rahmenfarbe: grün;
 Box-Shadow: Einschub 5px 0 0 grün;
}
.input-fill:nicht(:Platzhalter angezeigt):ungültig {
 Rahmenfarbe: rot;
 Box-Shadow: Einschub 5px 0 0 rot;
}

Mehr

Weitere spannende Inhalte finden Sie unter https://github.com/abc-club/free-resources

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Das Konzept der MySQL-Tablespace-Fragmentierung und Lösungen für damit verbundene Probleme

>>: So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot