input[type='email']:invalid:after

[grmblfx]

Hallo,

laut Dokumentation (zB. https://css-tricks.com/almanac/selectors/i/invalid/) kann man :invalid mit weiteren Pseudo-Selektoren kombinieren.

Auf meiner Beispielseite http://yourmed.de/kontakt.php wird mit input[type='email']:invalid:after { content: "X"; }

aber nichts angezeigt (getestet in Firefox und chrome). Woran liegt das? Hat es evtl. etwas mit der flexbox-Positionierung zu tun?

Ich habe bisher überhaupt nur zwei Varianten gesehen:

• label nach dem input-Feld und dann input[type='email']:invalid + label:after { content: "X"; }

• ein span-Element o.ä. nach dem input

Beides finde ich nicht schön, geht es auch direkt mit dem input-Feld?

Gruß Daniel

[Matthias Apsel]

Hallo grmblfx,

Beides finde ich nicht schön, geht es auch direkt mit dem input-Feld?

Nein. Input kann keinen Inhalt haben, auch keinen generierten.

Bis demnächst
Matthias

[grmblfx]

Nein. Input kann keinen Inhalt haben, auch keinen generierten.

Okay, dass kann ich nachvollziehen.

Interessanterweise hat chrome (als ich nur input:invalid:after geschrieben hatte) bei der Checkbox allerdings ein "X" angezeigt. Warum können checkboxen dann einen Inhalt haben?

Danke!

Daniel

[Matthias Apsel]

Hallo grmblfx,

Interessanterweise hat chrome (als ich nur input:invalid:after geschrieben hatte) bei der Checkbox allerdings ein "X" angezeigt. Warum können checkboxen dann einen Inhalt haben?

Das wird wohl das invalide form-Element gewesen sein(?)

Bis demnächst
Matthias

[grmblfx]

Hallo grmblfx,

Interessanterweise hat chrome (als ich nur input:invalid:after geschrieben hatte) bei der Checkbox allerdings ein "X" angezeigt. Warum können checkboxen dann einen Inhalt haben?

Das wird wohl das invalide form-Element gewesen sein(?)

Hm, ich habe es gerade noch mal geändert auf http://yourmed.de/kontakt.php:

Das X erscheint ungefähr da, wo die Checkbox ist (nur in chrome, nicht in Firefox). Wenn es sich auf das geamte form-Element beziehen würde (kann das invalide sein?), müsste es eigentlich nach dem button erscheinen.

Gruß Daniel

[Matthias Apsel]

Hallo grmblfx,

Wenn es sich auf das geamte form-Element beziehen würde (kann das invalide sein?),

https://html.spec.whatwg.org/multipage/semantics-other.html#selector-valid

müsste es eigentlich nach dem button erscheinen.

im Firefox tut es das.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo grmblfx,

input[type='email']:invalid:after {
  content: "X";
}

aber nichts angezeigt (getestet in Firefox und chrome). Woran liegt das? Hat es evtl. etwas mit der flexbox-Positionierung zu tun?

Neben dem schon genannten Grund noch ein paar Kleinigkeiten:

Pseudoelemente bekommen zwei Doppelpunkte. Warum sollte der Großbuchstabe X für ein fehlerhaft ausgefülltes Element stehen?

Beides finde ich nicht schön, geht es auch direkt mit dem input-Feld?

Die gewünschte Gestaltung sollte auch auf diesen beiden Wegen erreichbar sein.

Bis demnächst
Matthias

[grmblfx]

Pseudoelemente bekommen zwei Doppelpunkte.

Danke für den Hinweis. Ich habe den Unterschied zwischen Pseudoklasse und Pseudoelement noch nicht ganz verinnerlicht.

Warum sollte der Großbuchstabe X für ein fehlerhaft ausgefülltes Element stehen?

War nur die Testversion, wäre noch ersetzt worden.

Beides finde ich nicht schön, geht es auch direkt mit dem input-Feld?

Die gewünschte Gestaltung sollte auch auf diesen beiden Wegen erreichbar sein.

Das ist mir bewusst, aber label vor input macht für mich keinen Sinn, und Platzhalter-Elemente, die nur für Formatierungen benutzt werden ohne semantischen Sinn, benutze ich ungern.

Gruß Daniel

[Matthias Apsel]

Hallo grmblfx,

Das ist mir bewusst, aber label vor input macht für mich keinen Sinn,

Du meinst input vor label und ergibt 😉

und Platzhalter-Elemente, die nur für Formatierungen benutzt werden ohne semantischen Sinn, benutze ich ungern.

Sie hätten dann ja einen semantischen Sinn.

Es gibt auch die Möglichkeit, das input als Kind des labels zu verwenden.

Bis demnächst
Matthias

[grmblfx]

Hallo grmblfx,

Das ist mir bewusst, aber label vor input macht für mich keinen Sinn,

Du meinst input vor label und ergibt 😉

Exakt 😀

und Platzhalter-Elemente, die nur für Formatierungen benutzt werden ohne semantischen Sinn, benutze ich ungern.

Sie hätten dann ja einen semantischen Sinn.

Es gibt auch die Möglichkeit, das input als Kind des labels zu verwenden.

Habe ich gelesen, finde ich semantisch aber auch nicht schön.

Vermutlich bin ich einfach zu puristisch oder zwanghaft 😐, wenn ich mir die DIV-Suppe vieler Seiten anschaue...

Gruß Daniel