在Firefox中删除复选框的边框

Question

我已经使用图像作为复选框背景，当复选框被选中时图像会发生变化。它在Chrome中是合适的但在Firefox中存在问题。在Firefox中，它显示复选框的边框或框阴影，并显示黑色标记。

复选框的屏幕截图：

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://livemysite.com/Eduardo/img/unchecked.png);
}

input[type="checkbox"]:checked {
  background-image: url(http://livemysite.com/Eduardo/img/checked.png);
  background-size: 70%;
}

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

Answer 1

不幸的是，它无法删除浏览器本机复选框上的边框（它不适用于所有浏览器）。 您可以处理外观修饰符以及应用样式的准确css选择器，但有时无法使用。

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

Answer 2

＆＃13;

＆＃13;

label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
  display:inline-block;
  border:1px solid #BBB;
  width:25px;
  height:25px;
  vertical-align:middle;
  margin:3px;
  transition:width 0.1s, height 0.1s, margin 0.1s;
  background-image: url(http://livemysite.com/Eduardo/img/unchecked.png);
}
label.checkbox :checked + span {
  width:27px;
  height:27px;
  margin: 2px;
  background-image: url(http://livemysite.com/Eduardo/img/checked.png);
  background-size: 70%;
   background-repeat: no-repeat;
   background-size: contain;
}

＆＃13;

<label class="checkbox">
  <input type="checkbox"/>
  <span></span>Test
</label>

＆＃13;

＆＃13;

＆＃13;