:required ein Symbol mit csshervorheben

[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