Ausgewählten Bereich farbig beibehalten

[Rolf B]

Hallo AndyLee,

bitte beachte, dass es auch Benutzer ohne Maus gibt. Eine Bedienung per Tastatur oder Touchscreen muss ebenfalls möglich sein. Manche Anwender verwenden auch Sprachassistenten. Wenn Du zu viel eigene Bedienlogik per JavaScript hinzufügst, läufst Du Gefahr, dass deine Seite nur noch mit Maus bedienbar ist.

Deine Problemstellung könnte sich auflösen, wenn Du passende HTML Elemente verwendest. In deinem Fall: <input type="radio">. Da Du von a:active geschrieben hast, scheint es, als würdest Du im Moment a Elemente verwenden. Das scheint mir unpassend - aber ich kenne deine Seite ja nicht.

Wenn Du einen Radiobutton aktivierst, werden alle anderen Radiobuttons mit gleichem name-Attribut deaktiviert, und über den Attributselektor [checked] kannst Du erreichen, dass ein Radiobutton farblich markiert wird, wenn er ausgewählt ist.

Nun möchte man ggf. die runden Knöpfchen der Standard-Radiobuttons nicht sehen. Das kann man dadurch lösen, dass man den Radiobutton an sich versteckt und durch CSS dafür sorgt, dass sein zugeordnetes Label (was er ohnehin braucht) gestyled wird.

Zum Beispiel so:

<div class="labelledRadio">
   <input type="radio" name="leistung" id="rb_proKid" value="proKid">
   <label for="rb_proKid">Probetraining für Kinder</label>
</div>
<div class="labelledRadio">
   <input type="radio" name="leistung" id="rb_soccerKidZ" value="fußKidZ">
   <label for="rb_soccerKidZ">Fußballtraining Z-Jugend</label>
</div>

Mit CSS kannst Du

• dem .labelledRadio-Element einen Rahmen geben
• anzeigen, dass die Maus über einem Label schwebt (mit label:hover Selektor, NICHT mit JavaScript und mousemove-Event)
• das Radiobutton-Element visuell verstecken (z.B. width:0; padding:0; margin:0;). Allerdings musst Du dann noch etwas mehr tun:
  • den Tastaturfokus darstellen, z.B. mit Hilfe des Selektors input[type=radio]:focus + label. Du könntest dem Label dann eine passende outline-Eigenschaft geben, um einen Fokusrahmen darzustellen. Leider gibt's da kein Standardfeature für (das ich kennen würde). Es könnte besser aussehen, wenn Du den Radiobutton einfach sichtbar lässt, dann macht der Browser die Arbeit für Dich
  • die blöde Leerstelle vor dem Label entfernen, die zwischen input und label steht und das Label einrückt. Dazu setzt Du auf .labelledRadio die Eigenschaft display:flex;
  • das label hinter dem ausgewählten Radiobutton hervorheben (mit input:checked + label Selektor), bspw. per Hintergrundfarbe.

Es ist etwas blöd, dass Browser immer noch nicht ein Element stylen können, in dem ein Kindelement eine bestimmte Eigenschaft hat. Du kannst also dem .labelledRadio div nicht eine Hintergrundfarbe geben, wenn der Radiobutton darin ausgewählt ist. :has() steht zwar in CSS Selectors Level 4, ist aber nirgends implementiert und es ist auch nicht sicher, dass es bleibt. Deswegen muss man tricksen, wenn man es so aussehen lassen möchte, als ob für ein ausgewähltes Radioelement der komplette Rahmen eine Hintergrundfarbe bekommt. Meine Lösung ist ein position:relative auf dem Rahmen, position:absolute auf dem Radioelement und ein linksseitiges Padding im Label. Damit "schwebt" der Radiobutton über dem Label und erscheint so, als befände er sich darin. Er darf sich DOM-technisch aber nicht darin befinden, weil man das Label ansonsten nicht abhängig von dem Radioelement stylen könnte.

Ich habe mal 2 Beispiele gemacht: jsfiddle.

Rolf