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

problematische Seite

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

  1. problematische Seite

    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

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. problematische Seite

      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

      1. problematische Seite

        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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. problematische Seite

          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

          1. problematische Seite

            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

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  2. problematische Seite

    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

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. problematische Seite

      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

      1. problematische Seite

        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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. problematische Seite

          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