How to make this CSS switch color background change in enabled / disabled sate?

I have a CSS switch like this:

* { box-sizing: border-box; }
.switch { appearance: none; padding: 9px 18px; border-radius: 13px; background: radial-gradient(circle 9px, #007722 100%, transparent 100%) transparent -9px; border: 1px solid #007722; }
.switch:checked { background-position: 9px; }

<input type="checkbox" class="switch"></div>

How to make that, disabled, it stays with a transparent background, but once enabled, it has another background?

Example: