De accentkleur van input-elementen veranderen

Hieronder zie je twee blokken, elk met een invoerveld, radiobuttons en checkboxen. Links ziet het er "gewoon" uit, rechts hebben de elementen een ander kleurtje. Het gaat hier om het effect aan de rechterkant. Op deze pagina wordt uitgelegd hoe je dit maakt.

De accentkleur van de radiobuttons en de checkboxen stel je in met accent-color:kleur;. Dit werkt niet voor andere elementen. Voor kleur kun je elke kleurcode, kleurnaam, rgb()-, rgba()-, hsl()- of hsla()-function gebruiken, Zie ook het item Kleurcodes voor tekst, links en achtergrond.

De accentkleur van invoervelden is grijs. Dat geldt bij alle browsers. De rode accentkleur bij het invoerveld is gemaakt met border:2px solid red; border-radius:3px;.

De "gewone" accentkleuren, d.w.z. de default-instellingen van de browser, kunnen verschillen per platform (= combinatie van operating system en browser). Zie het onderstaande staatje, dat de status weergeeft op 12 december 2024. Opvallend is dat alleen Chrome hierin consequent is.