:required ein Symbol mit csshervorheben

[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

:required { background: red; }

Weis jemand ob das möglich ist

Charlie

[Rolf B]

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

[beatovich]

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

[Gunnar Bittersmann]

@@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 🖖

[Rolf B]

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

[Gunnar Bittersmann]

@@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 🖖

[Rolf B]

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

[Gunnar Bittersmann]

@@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 🖖

[Rolf B]

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

[Matthias Apsel]

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

[marctrix]

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

[Matthias Apsel]

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