Charlie: :required ein Symbol mit csshervorheben

<div class="form">
<label>Nr<span>*</span></label>
<input type="text" name="name" required>
</div>

ich würde gerne das span nur anzeigen wenn ein required im Input vorhaden ist

:required { background: red; }

Weis jemand ob das möglich ist

Charlie

  1. Hallo Charlie,

    sowas löst man normalerweise mit dem Nachbarselektor, sowas wie :required + span, aber deine Reihenfolge ist andersrum. Muss der Stern vor dem input sein?

    CSS wehrt sich seit jeher erfolgreich gegen Versuche, Selektoren zu definieren die bei einem pre-order Durchlauf durch das DOM einen "Blick nach vorn" benötigen, also Abfragen wie "hast Du ein Kind-Element mit Eigenschaft XY" oder "folgt Dir ein Geschwisterelement mit Eigenschaft YZ". Grund 1 ist Performance, Grund 2 ist, dass solche Vorwärtsabfragen die Layout-Logik verkomplizieren und vermutlich sogar Endlosschleifen ermöglichen.

    Rolf

    --
    sumpsi - posui - clusi
    1. hallo

      sowas löst man normalerweise mit dem Nachbarselektor, sowas wie :required + span, aber deine Reihenfolge ist andersrum. Muss der Stern vor dem input sein?

      Ich würde :valid :invalid auswerten und nach dem input anzeigen lassen

      --
      Neu im Forum! Signaturen kann man ausblenden!
  2. @@Charlie

    <div class="form">
    <label>Nr<span>*</span></label>
    <input type="text" name="name" required>
    </div>
    

    ich würde gerne das span nur anzeigen wenn ein required im Input vorhaden ist

    Du kannst mit CSS nicht rückwärts selektieren; d.h. du kommst an das span nicht ran, wenn es vor dem imput steht.

    Du kannst das span aber nach dem input im Markup haben und mit Flexbox die visuelle Reihenfolge vertauschen. Sieht dann so aus.

    Ich lasse dabei das span immer anzeigen, aber nur bei Pflichtfeldern mit einem * füllen.

    Dein Eingabefeld hat übrigens keine Beschriftung. label und input müssen über for-/id-Attribute gekoppelt sein oder das input muss sich innerhalb des label-Elements befinden.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      zwei Dumme, ein Gedanke 😀

      Die Idee mit row-wrap ist ganz prima, die kam mir nicht weil Formulare in meinem Kopf immer noch ihre Labels links vom Eingabefeld haben.

      Das input muss aber für die row-wrap Lösung ein flex: 1 0 100% bekommen, damit es immer in der 2. Zeile ist.

      Rolf

      --
      sumpsi - posui - clusi
      1. @@Rolf B

        Das input muss aber für die row-wrap Lösung ein flex: 1 0 100% bekommen, damit es immer in der 2. Zeile ist.

        Grmpf, das hatte ich sogar erst so. Jetzt auch wieder.

        Dachte, das könnte man abkürzen. Geht aber nicht, wenn die Breite des div größer ist oder der Text der Beschriftung sehr kurz ist.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. Hallo Charlie,

    ich habe ein wenig gebastelt, und es geht mit einem Trick. Der * muss dafür aus dem Label herausgeholt und im HTML hinter dem input-Element angeordnet werden. Man braucht auch einen Container (deine Labels sind sowieso kaputt weil ihnen das for-Attribut fehlt), darum verwende ich die Container-Version von label, die braucht kein for.

    Unschön ist, dass das Sternchen jetzt nicht mehr direkt hinter dem Labeltext steht, sondern direkt vor dem input. Anders habe ich es nicht hinbekommen. Mit etwas Fummelei bei den Breitenangaben für das Label und das input-Element sowie einem flex:1 auf dem Sternchen kann man vermutlich noch was hexen, aber dann dürfte die Responsiveness leiden.

    Jedenfalls kann man mit der order-Eigenschaft des Flexbox-Layouts das Sternchen für CSS rechts vom Input anordnen und für die Optik nach links holen.

    <form>
    <label><span>Nummer1</span><input type="text" required><span aria-hidden>*</span></label>
    <label><span>Nummer2</span><input type="text" ><span aria-hidden>*</span></label>
    </form>
    
    form label { display: flex;  margin-bottom: 1em; }
    form span:nth-of-type(1) { flex-basis: 8em; }
    form input { flex-basis: 10em; order: 1; }
    form span:nth-of-type(2) { color:transparent; }
    
    input:required + span:nth-of-type(2) { color:red;  }
    

    Der Stern wird durch color:transparent unsichtbar gemacht und bei required mit Farbe versehen. Das Input-Element wird durch order:1 hinter den Stern gesetzt (per Default ist order=0). Ob mein aria-hidden richtig ist, wird sicherlich noch jemand anderes kommentieren; ich denke aber, dass man das Sternchen vor Accessibility-Tools verstecken sollte. Die müssten auf required reagieren.

    Rolf

    --
    sumpsi - posui - clusi
    1. @@Rolf B

      Der Stern wird durch color:transparent unsichtbar gemacht und bei required mit Farbe versehen.

      Das ist ein mieser Hack. Und ein unnötiger; dafür gibt’s display: none und visibility: hidden.

      Und ein unbrauchbarer noch dazu, wenn jemand die Schriftfarbe in seinem Nutzerstylesheet setzen sollte.

      Ob mein aria-hidden richtig ist, wird sicherlich noch jemand anderes kommentieren; ich denke aber, dass man das Sternchen vor Accessibility-Tools verstecken sollte. Die müssten auf required reagieren.

      Das denke ich auch.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hallo Gunnar,

        Und ein unnötiger; dafür gibt’s display: none und visibility: hidden.

        Ja klar, aber die führen bei einzeiliger Darstellung dazu, dass sich das input-Feld verschiebt. Wie macht man's besser, bei gleichem Erscheinungsbild? Ich hab halt Programmieren in der 80x24 Welt (IBM 3270 - yeah/yuck) gelernt und mag Labels und Eingabefelder auf einer Zeile

        Rolf

        --
        sumpsi - posui - clusi
        1. Hallo Rolf B,

          Und ein unnötiger; dafür gibt’s display: none und visibility: hidden.

          Ja klar, aber die führen bei einzeiliger Darstellung dazu, dass sich das input-Feld verschiebt.

          bei visibility: hidden sollte der Platz frei bleiben

          Bis demnächst
          Matthias

          --
          Rosen sind rot.
        2. Hej Rolf,

          Und ein unnötiger; dafür gibt’s display: none und visibility: hidden.

          Ja klar, aber die führen bei einzeiliger Darstellung dazu, dass sich das input-Feld verschiebt.

          Die einzeilige Darstellung erschwert das Ausfüllen der Felder, nicht nur aber besonders für Menschen, die auf eine starke Vergrößerung angewiesen sind.

          Daher wird empfohlen die Labels und Felder linksbündig auszurichten.

          Wie macht man's besser, bei gleichem Erscheinungsbild? Ich hab halt Programmieren in der 80x24 Welt (IBM 3270 - yeah/yuck) gelernt und mag Labels und Eingabefelder auf einer Zeile

          Der Mensch ist ein Gewohnheitstier. 😉

          Marc

          1. Hallo marctrix,

            Daher wird empfohlen die Labels und Felder linksbündig auszurichten.

            Genau. Siehe zum Beispiel https://wiki.selfhtml.org/wiki/CSS/Tutorials/zugängliche_Eingabefelder.

            Bis demnächst
            Matthias

            --
            Rosen sind rot.