Hintergrundfarbe von Checkboxen

[fietur]

Hallo,

gibt es eine einfache Möglichkeit, die Hintergrundfarbe der Formularelemente im CSS zu ändern, ohne gleich das ganze Element zu überschreiben?

Es sollte doch eine Standard-Farbeinstellung für den Hintergrund der Eingabefelder von <input> und <textarea> und auch für die Kästchen der Checkboxen und Radios geben. So wie body { accent-color:...; } die Farbe im ausgewählten Zustand anpasst, muss es doch auch für die Hintergrundfarbe eine Einstellmöglichkeit geben.

Für Texteingabefelder wie input und textarea lässt sich ja einfach background: verwenden, aber wie sieht das beim Inneren von Checkboxen (Radios, Schiebereglern etc) aus?

Oder ist es so, dass zwar die Browser Farbeinstellungen aus ihrem Host-Betriebssystem auslesen und verwenden können, die entscheidende Schnittstelle hierfür aber nicht - außer vielleicht für die accent-color - zugänglich ist?

[Rolf B]

Hallo fietur,

So wie body { accent-color:...; } die Farbe im ausgewählten Zustand anpasst,

Tut es das? In welchem Browser? Nach meiner Kenntnis verwendet man für die Farbe von ausgewähltem Text das ::selection Pseudoelement.

muss es doch auch für die Hintergrundfarbe eine Einstellmöglichkeit geben.

Gibt's auch. Und Du hast sie auch schon gefunden: accent-color

Rolf

[fietur]

Tut es das? In welchem Browser? Nach meiner Kenntnis verwendet man für die Farbe von ausgewähltem Text das ::selection Pseudoelement.

Sorry, war schlecht ausgedrückt - es geht um die innere Hintergrundfarbe der umrahmten Boxen allgemein, nicht um die Textauswahl oder die (Accent-)Farbe im selektierten Zustand (z.B. mit Häkchen). Bei Textfeldern ist das kein Problem, da ist es background.

Ich suche den Zugriff auf die bloße Hintergrundfarbe innerhalb des Kästchens (Checkbox), Kreises (Radio) oder Balkens (Schieberegler), also das was sich ohne Vorhandensein der Accent-Farbe dort befindet.

[Rolf B]

Hallo fietur,

okay, dafür bleibt dann wohl nur, die Checkbox oder den Radiobutton zu verstecken und ein Ersatzelement per Checkbox-Hack zu färben. Wenn das Ersatzelement Teil des Labels ist, ist das okay.

Beispiele dafür gibt's wie Seiten im WWW.

Rolf

[fietur]

Danke Rolf,

ich habs befürchtet. Kurz hatte ich Hoffnung, bei color-scheme: dark | light fündig zu werden, aber da wird die Auswahl dem Browser überlassen. Selbst wenn man auf die Standardeinstellungen der Browser Zugriff hätte, wäre das wieder für jeden Browser unterschiedlich.

[Gunnar Bittersmann]

@@Rolf B

okay, dafür bleibt dann wohl nur, die Checkbox oder den Radiobutton zu verstecken und ein Ersatzelement per Checkbox-Hack zu färben.

Nein. Man muss Checkbox bzw. Radiobutton nicht verstecken und man braucht kein Ersatzelement.

Wenn man Checkbox bzw. Radiobutton stylen will, stylt man Checkbox bzw. Radiobutton.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wenn man Checkbox bzw. Radiobutton stylen will, stylt man Checkbox bzw. Radiobutton.

War mir doch so, als hätte ich für eine geplante Präsentation schon mal was vorbereitet: Radio.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

… geplante Präsentation

Für die Titelfolie hab ich dieses Bild auserkoren:

(Foto: Maximilian Hofer / Unsplash)

Da kann man gut sehen, woher der Begriff „Radiobutton“ für Buttons kommt, bei denen der vorher gedrückte rausspringt, wenn ein anderer gedrückt wird.

🖖 Живіть довго і процвітайте

[fietur]

Ok, dem Codepen konnte ich schonmal entnehmen, dass das grundsätzlich möglich ist. Das Aufheben der Browsereinstellungen mit appearance: none darf man dazu nicht vergessen. Das Verbiegen der Radios ist eine nette Idee, damit lässt sich jede Menge Unfug anstellen...

Ich hab's für mich jetzt vorläufig so gelöst, dass ich bei den Farbschemata, bei denen das Weiß der Checkboxen unangenehm gegenüber sehr dunklen Farben heraussticht, ein color-scheme: dark; einfüge. Gleichzeitig verschwinden damit auch die zu hellen Ränder. Mal sehen, ob mir das in ein paar Tagen auch noch genügt. Oder ob das auf Uralt-Geräten dann doch auch noch eine Anpassung benötigt.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

War mir doch so, als hätte ich für eine geplante Präsentation schon mal was vorbereitet: Radio.

Ihr habt im Radio noch den Frühling gefunden, wo jetzt schon bald der Sommer vor der Tür steht?

🖖 Живіть довго і процвітайте