CSS ''background-color" attribute not working on checkbox inside <div>

A checkbox does not have background color.

But to add the effect, you may wrap each checkbox with a div that has color:

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>

In addition to the currently accepted answer: You can set border and background of a checkbox/radiobutton, but how it is rendered in the end depends on the browser. For example, if you set a red background on a checkbox

• IE will show a red border instead
• Opera will show a red background as intended
• Firefox, Safari and Chrome will do nothing

This German language article compares a few browsers and explains at least the IE behavior. It maybe bit older (still including Netscape), but when you test around you'll notice that not much has changed. Another comparison can be found here.

You can use peseudo elements like this:

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 27px;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #9FFF9D;
  display: inline-block;
  visibility: visible;
}

input[type=checkbox]:checked:after {
  content: "\2714";
}

<label>Checkbox label
      <input type="checkbox">
    </label>

After so much trouble i got it.

    .purple_checkbox:after {
      content: " ";
      background-color: #5C2799;
      display: inline-block;
      visibility: visible;
    }
    
    .purple_checkbox:checked:after {
      content: "\2714";
      box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
      border-radius: 3px;
      height: 12px;
      display: block;
      width: 12px;
      text-align: center;
      font-size: 9px;
      color: white;
    }

 <input type="checkbox" class="purple_checkbox">

It will be like this when checked with this code.