CSS - Checkboxen und Radiobuttons farblich anpassen





70% Progress





70% Progress





70% Progress





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

Schlagzeile entscheidet
Maßgeblich beeinflusst wird dieser erste Eindruck durch die auf Ihrer Website verwendeten Headlines (Schlagzeilen): Wenn Sie Teaser, also Anreißer-Texte, verwenden, dann entscheidet die verwendete Headline oft, ob man zum Artikel weiterklickt. Die über einer Seite platzierte Haupt-Headline ist ein wichtiges Kriterium für die Entscheidung, ob weitergelesen wird oder nicht. Auch die im Text verwendeten Subheadlines spielen dabei eine große Rolle.