You can't directly change the colours of a natively-rendered checkbox via CSS. If you inspect the HTML in that link you provided for the header checkbox, you'll notice that it's actually a "material checkbox" which is a fancy way of rendering a checkbox with custom styling. It works by actually hiding the native checkbox input and building a new one.
I've put together a
Edit fiddle - JSFiddle - Code Playground[
^] to quickly show how you can achieve this. You basically need to wrap both the input and text in a
<label>
, then hide the
<input>
and have an indicator element to represent the checkbox itself.