Radio-Buttons/Checkbox Style ändern - und per CSS bearbeiten

[Folia-Cut]

Hallo zusammen,

bin jetzt schon seit längerem auf der Suche wie man in Contao das Layout von Radio-Buttons ändern kann. Kann aber nichts finden. Das Problem liegt ja irgendwie an den input Feldern. Mir gefallen einfach die normalen Radio-Buttons nichts und würde gerne so etwas ähnliches wie bei diesem Kontaktformular einbauen:

https://specials.mercedes-benz.de/a-klasse/newsletter (z.b. bei der Anrede)

Suche wie gesagt schon eine gefühlte Ewigkeit, aber kann zumindest keine Lösung finden. Habt Ihr evtl. so etwas schon einmal erfolgreich umgesetzt? Was muss man dazu alles ändern (Template forms.html5, usw.)

Gruß Hörb

[lucina]

Eigentlich geht das alles per CSS. Schau mal beispielsweise hier: https://lokesh-coder.github.io/pretty-checkbox/#radio

[Folia-Cut]

Das es per CSS geht ist mir klar, aber die Radio-Buttons sind in den HTML5 Template ja vom Aufbau her anders.
Wie kann ich für z.b. ein Radio-Button Menü anwenden in Contao?

[lucina]

Indem Du Deine Radio-Buttons wie eine Checkbox stylest. Die von mir verlinkte CSS-Library zeigt doch exemplarisch wie das grundsätzlich geht. Es gibt dazu etliche Lösungen, denen es vollkommen egal ist, wie das umgebende Markup für input[type='radio'] ausschaut.

[Folia-Cut]

Danke für die Antwort Lucina,

aber wie mach ich das genau? Muss ich dann Checkbox auswählen anstatt Radio-Button-Menü.

Die CSS Datei habe ich schon eingebunden, aber an welcher Stelle muss ich dann Änderungen machen - nur über einfügen einer zusätzlichen CSS-Klasse. Hat irgendwie keine postive Auswirkung und ich bekomme dann die Inputfelder nicht mehr angezeigt.

[Ainschy]

CSS das unbekannte Wesen ... sry der musste jetzt sein.

[Folia-Cut]

Also das man solche Buttons nicht ganz so einfach ändern kann, habe ich jetzt schon mehrfach gelesen - und auch keine Lösung gefunden. Sonst würde ich hier auch nicht schreiben :-)

[Ainschy]

Also das man solche Buttons nicht ganz so einfach ändern kann, habe ich jetzt schon mehrfach gelesen - und auch keine Lösung gefunden. Sonst würde ich hier auch nicht schreiben :-)

Schau dir das Formular am Ende dieser Seite an: https://www.rlprofile.de/

[Andreas]

Ich hatte da mal einen fiddle gemacht, welcher zeigt, wie es geht. https://jsfiddle.net/Andreas/rxvgoy1h/

Die Tricks sind 1., dass man den Umstand ausnutzt, dass man nicht auf das Input-Element klicken muss, sondern auch auf das dazugehörige Label-Element klicken kann.

Also versteckt man das Input-Element einfach (sichtbar für Screenreader) und arbeitet dann gestalterisch nur noch mit dem Label-Element.

2. gibt es den Pseudo-Selektor :checked. Diesen benutzt man dann dazu um das Label zu verändern, wenn das Checkbox/Radio aktiviert ist. Auszug aus dem Fiddle CSS:

/** activated checkbox states */
.checkbox:checked + label {
  background-color: rgba(255, 0, 0, 1);
}