CSS - Checkboxen und Radiobuttons farblich anpassen

Checkbox
Radiobutton
Radiobutton
Slider
70% Progress

Checkbox
Radiobutton
Radiobutton
Slider
70% Progress

Checkbox
Radiobutton
Radiobutton
Slider
70% Progress

Checkbox
Radiobutton
Radiobutton
Slider
70% Progress

<style>
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
 accent-color: #FF0000;
}
</style>

<p>
<label> <input type="checkbox" checked="checked"> Checkbox </label> <br>
<label> <input type="radio" checked="checked"> Radiobutton </label> <br>
<label> <input type="range"> Slider </label> <br>
<progress value="70" max="100"> 70% </progress> Progress
</p>

Funktioniert im Mozilla Firefox (93) und auf Chromium basierten Browsern (wie: Edge, Chrome, Opera).

Siehe auch: Radio-Buttons und Checkboxen per CSS gestalten und Listenelemente einfärben

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<cite> Zitat

CSS - Nur gefüllte Tabellenzellen hervorheben

PHP - Den Array-Inhalt in einer Tabelle aufteilen

JavaScript - Eine CSS-Klasse hinzufügen, wenn ein Bildlauf durchgeführt wird

MySQL - Höchstwert einer Spalte ermitteln