Match tailwind checkbox default active bg color with checked bg color

so when the checkbox is checked its green. cool. I want it to be green. NOT the default blue.

But when the checkbox is in an active/focus/just changed state its the default blue color.

i've tried with changing focus:bg-green-400, active:bg-green-400 etc. It still doesn't work properly.

What am I missing?

<input type="checkbox"
       class="appearance-none rounded-2xl h-20 w-20 bg-transparent
             focus:ring-0 focus:ring-offset-0 checked:bg-green-400
             border-gray-300 border-2">