How can I change appearance of checkbox button?

I need to change appearance of my checkbox button, precisely i need to place custom background image instead of regular gray square.

Now I tried something like this:

[type="checkbox"] {
  width: 15px;
  height: 15px;
  background-image: url("../images/checkbox.png")
}

[type="checkbox"]:checked {
  width: 15px;
  height: 15px;
  -webkit-appearance: none;
  background-image: url("../images/checkbox-c.png")
}

and it works fine for when checked but while idle it does not change background image to checkbox.png it remains simple gray square.