Custom background for a checkbox not responding

I'd like the checkboxes I have to have ideally black or transparent backgrounds. Right now they're the default white. I cannot for the life of me figure out how to change it.

#checkboxes {
  position: absolute;
  top: 33%;
  left: 23%;
  right: 10%;
  width: 450px;
  height: 55px;
  font-size: 20px;
  font-weight: 700;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
  scale: 1.3;
}

input[type="checkbox"] {
  background: var(--black);
  accent-color: var(--green);
}

<aside id="checkboxes">
  <input type="checkbox" id="checkUppercase">
  <input type="checkbox" id="checkLowercase">
  <input type="checkbox" id="checkNumbers">
  <input type="checkbox" id="checkSymbols">
</aside>

Do I need to make custom boxes out of divs instead?