checkbox farblich ändern

[Ripperz]

Hallo,
ich habe irgendwie probleme mit dem formatieren eines Checkbox buttons in meinem Formular.
Ich möchte das gerne etwas farblich aufpeppen mit css. Allerdings bekomme ich keine veränderung in der checkbox hin. Egal was ich ändere. Kann mir einer helfen wie ich das mache?

[jscholtysik]

Hi Ripperz,


bitte immer einen Link auf Deine Seite mit anbringen, denn sonst ist es immer schwierig, zu helfen...

[derRenner]

Hallo,
so wie auch @jscholtysik schon vermerkt hat, wäre ein Link hilfreich.
Aber vielleicht hilft dir dieser codepen-snippet schon weiter, um zu erkennen, welche Teile der checkbox du ansprechen musst.

[Andreas]

Kurz zur Erklärung. Checkboxen und auch diverse andere Elemente sind von den Browsern erstmal vor Formatierungen geschützt. Das hat bestimmt auch sicherheitstechnische Gründe.

Die Beispiele aus dem obigen Link machen sich den Umstand zunutze, dass ein Klick auf ein Label auch die Checkbox aktiviert/deaktiviert. Man versteckt also die Checkbox, z.B. mit visibility:hidden; oder wie ich es mache mit der class "invisible" auf die Checkbox, und formatiert dann nur noch das Label. Pseudo-Elemente wie ::before und ::after sowie CSS transition, :focus, :hover, :active usw. können da hilfreich sein, je nachdem was man möchte.

Hier hatte ich das z.B. mal mit Checkboxen im Metamodels gemacht (die Filter auf der linken Seite) http://globolog.net/angebote-finden.html

[Ripperz]

Hallo Andreas,
danke für die gute Erklärung.

Also ich habe hier ein Formular. Dort gibt es eine Checkbox und 2 Radiobutton
http://www.ritter-schleifservice.de/...b-hamburg.html

Beides würde ich gern etwas aufpeppen, nur komme ich irgendwie an meine Grenzen. Zwar habe ich schon etwas über der formatierung von checkboxen gelesen, scheiter aber an der Umsetzung.

Wie müsste ich das machen?

[Andreas]

Das kommt drauf an, was du möchtest. Schau dir mal die Spielwiese an https://jsfiddle.net/Andreas/rxvgoy1h/

Füge in den Devtools auf deiner Seite bei Stilbearbeitung ne neue Datei hinzu und füge das CSS ein. Lies das CSS. Dann kannst du damit rumspielen. Wenn du es verstanden hast, dann kannst du dir eins von den Beispielen aus codepen.io holen und an deine Bedürfnisse anpassen.

Oder ich kann dir das als Kleinstauftrag umsetzen.