Louis Lazaris erklärt einige echte CSS-Tricks von Jane. Der Pen zeigt Interaktivität, bei der
Von dort erscheint eine spezielle Nachricht …
/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work 
Ich halte den :placeholder-shown Selektor für unglaublich cool. Er ermöglicht es Ihnen, den Platzhalter eines Eingabefeldes (<input placeholder="..."/>) auszuwählen, wenn dieser Platzhalter vorhanden ist. Das bedeutet, dass das Eingabefeld noch keinen Wert hat. Sie könnten an input[value] denken...
Die Floated-Label-Technik existiert schon seit einer ganzen Weile und die allgemeine Idee ist diese: Wir haben ein Text-Input-Feld mit dem Platzhalter-Attribut, das als Label fungiert. Wenn ein Benutzer in dieses Input-Feld tippt, das Label …
