Remove border of checkbox in firefox

I have used images for checkbox background,where image get change when checkbox is checked.It is proper in chrome but giving issue in Firefox. In Firefox it is showing border or box shadow for checkbox and also show black colour tick.

Screenshot of checkbox

label {
  margin: 0;
  height: auto;
  cursor: pointer;
  font-weight: 400;
  padding: 3px 20px 3px 40px;
}

input[type="checkbox"] {
  display: block;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-appearance: none;
  outline: 0;
  margin: -4px 0 0;
  margin-top: 1px\9;
  line-height: normal;
  position: absolute;
  margin-top: 4px\9;
}

input[type="checkbox"]:not(:checked) {
  background-image: url(http://ift.tt/2cR90If);
}

input[type="checkbox"]:checked {
  background-image: url(http://ift.tt/2deQHYO);
  background-size: 70%;
}

<label class="checkbox">
  <input type="checkbox" value="1">Test</label>