Ausgewählten Bereich farbig beibehalten

[AndyLee]

Moin moin aus Norddeutschland,

auf der Website soll eine Form z. B. des Probetrainings ausgewählt werden. Bei "mouse-over" erscheint die Auswahl in einem hellen grün. Nun möchte ich, dass, wenn ein User eine Auswahl getroffen hat (z. B. das Probetraining für Kinder) diese Auswahl beim anklicken diese grüne Farbe auch beibehält, sodass der Interessent klar sieht, was er da ausgewählt hat.

Habe es schon mit a:active probiert, klappt aber nicht. Kann mir dabei jemand behilflich sein?

[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

[AndyLee]

Erstmal: Danke für die Möglichkeiten.

Mein konkretes Problem zeigt sich auf der Seite https://sai-fon.com/probetraining/

Edit Rolf B: Link zum Link gemacht (in spitze Klammern setzen)

Das Buchungselement selbst befindet sich bei "etermin" und ist per iframe in die Hauptseite eingebunden. Im Backend bei "etermin" habe ich die Möglichkeit, alles per CCS zu beeinflussen.

Momentan ist das CCS zum besagten Buchungstool:

.s:hover { background-color: #e2e7d6; }

Alles ganz einfach gehalten. Ich möchte nur, dass nach der Auswahl eines Trainings der Interessent sieht, was er ausgewählt hat. Momentan erscheint oben links im ausgewählten Bereich ein rotes Häckchen. Dies soll auch so bleiben, nur soll dazu noch der Hintergrund im selben grün sein, wie beim "hover".

[Rolf B]

Hallo AndyLee,

inwieweit deine interaktiv gemachten divs die Gnade eines Accessibility-Experten finden können, mögen andere beurteilen. Ich bin dafür kein Experte; ich weiß nur, dass man normalerweise davon Abstand nehmen sollte, nicht-interaktive Elemente interaktiv zu machen. Aber Maus und Tastatur funktionieren; ganz falsch kann es nicht sein. Wie es sich für einen Screenreader darstellt, weiß ich nicht.

Du setzt eine Klasse auf das Häkchen-SVG, um es einzublenden. Aber du setzt auf dem Elternelement auch aria-checked="true", und das kannst Du ausnutzen.

Versuche, die Klasse imgRBChecked wegzulassen und verwende statt

.imgRBChecked {
   transform:scale(1); 
   ...
}

das Konstrukt

[role=checkbox][aria-checked=true] .imgRBToggle {
   transform:scale(1); 
   ...
}

Damit suchst Du ein .imgRBToggle Element, das in einem Element mit Rolle Checkbox und aria-checked=true steht, d.h. Du verwendest den Checked-Status der Pseudocheckbox um das Häkchen einzublenden.

Genauso kannst Du mit

[role=checkbox][aria-checked=true] {
   background-color: pink;
}

die Hintergrundfarbe der Schaltfläche setzen.

Ob es eine gute Lösung ist, den Klick auf die Schaltfläche als "Menge=1" zu interpretieren, und dann auch noch wegzuscrollen, wage ich aber zu bezweifeln. Der User wird davon verwirrt, dass nach dem Klick (vielleicht sogar irrtümlich, weil er eigentlich "mehr" treffen wollte) etwas ganz anderes auf dem Bildschirm steht. Bleib bei den - und + Schaltflächen, und scrolle nicht. Ich glaube nicht, dass das Marketing von Stöcken und T-Shirt so wichtig ist. Als ich deine Seite das erste Mal sah, fragte ich mich, ob das eine echte Kampfschule ist oder ein Fake, der nur Merchandising-Artikel verhökern will. Diesen Eindruck möchtest Du sicherlich vermeiden. D.h. Du solltest unbedingt mit mehreren Leuten UI-Tests machen, und schauen, wie sie mit der Seite klarkommen.

Ein paar Hinweise noch (ein paar, nicht ein Paar):

• Es ist ein Paar Rattanstöcke (2 Stück) und nicht "ein paar Rattanstöcke" (einige, unbestimmte Anzahl).
• Deine Infotexte sind zu klein. 12px ist sehr wenig, und px-Angaben in der font-size sind eine Gemeinheit für den User. Der sieht schlecht, stellt im Browser die Defaultschriftgröße hoch und dann trickst Du ihn mit 12px aus. Mach es entweder prozentual (z.B. 85%) oder in em (d.h. relativ zum aktuell geltenden Font. font-size: 0.85em würde font-size: 85% entsprechen.
• Impressum: Du hast eine Kampfsystemschule, keine Kampsystemschule.
• Impressum: Wenn Du schon eine Streitbeilegungsstelle nennst, dann sei auch so nett und mach einen richtigen Link draus (mit rel="nofollow" damit Google keine Pagerank-Verknüpfung herstellt).

Rolf

[AndyLee]

Danke für die Antwort und die Hinweise, die sehr hilfreich waren.

Zur Info: Die Seite besteht nicht nur aus dieser einen Seite. Ein Interessent wird zunächst über unsere "Home-Seite" empfangen und da - meine ich - geht es weder um Stöcke, noch um T-Shirts. Insofern konnte ich mit dieser Kritik ehrlich gesagt wenig anfangen.

Was die Klassen usw. betrifft: Ich habe nicht die Möglichkeiten, Klassen hinzuzufügen oder zu entfernen, ich kann lediglich den CSS-Code beeinflussen.

[Rolf B]

Hallo AndyLee,

ja okay, mein "Fakeseiten" Eindruck mag dem Umstand geschuldet sein, dass ich direkt im Shop landete 😀

Ich habe nicht die Möglichkeiten, Klassen hinzuzufügen oder zu entfernen

Achso - hab übersehen dass das Wordpress ist.

Aber meinen Hinweis zum Image kannst Du ignorieren, die CSS Idee für den Hintergrund funktioniert auch isoliert.

Rolf

[AndyLee]

Alles klar. Danke noch einmal für deine sehr konstruktive Hilfe!

[MudGuard]

Hi,

Zur Info: Die Seite besteht nicht nur aus dieser einen Seite. Ein Interessent wird zunächst über unsere "Home-Seite" empfangen

Ist das wirklich so?

Ich zB. bin direkt auf der Probetraining-Seite gelandet (weil Du die ja verlinkt hast).

Du kannst nicht sicherstellen, daß nirgendwo etwas anderes als die Home-Seite verlinkt ist …

cu,
Andreas a/k/a MudGuard