自定义复选框-与Chrome，FireFox和Safari的兼容性

Question

我在我的网站上使用自定义复选框。我的问题是，Chrome和Firefox视觉效果使我看到一个白色的小框，如下图所示：

问题：：我不是网络专家，我需要一些帮助来解决此问题。预先感谢。

CSS：

input[type="checkbox"] {
  position: relative;
  display: inline-block;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  height: 25px;
  width: 50px;
  font-size: 25px;
  border-radius: 1.5em;
  background-color: #222;
  border-color: transparent;
  background-clip: padding-box;
  color: white;
  vertical-align: middle;
  -webkit-transition: all 0.25s linear 0.25s;
  transition: all 0.25s linear 0.25s;
  -moz-appearance:none;
  -webkit-appearance:none;
  -o-appearance:none;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 50%;
  background-color: white;
  border-radius: 100%;
  border: 0.125em solid transparent;
  background-clip: padding-box;
  z-index: 3;
  -webkit-transform-origin: right center;
          transform-origin: right center;
}

input[type="checkbox"]::after {
  position: absolute;
  left: 0.675em;
  top: 0;
  line-height: 2;
  font-family: "Ionicons";
  content: "";
  letter-spacing: 1em;
  z-index: 1;
}
input[type="checkbox"]:focus {
  color: white;
  border-color: transparent;
  background-color: #919FAF;
  outline: none;
}

td input[type="checkbox"]:checked {
  color: white;
  background-color: rgba(128, 201, 20,1);
  border-color: transparent;
}

HTML：

<input type="checkbox" onchange="check_prop()"/>

Answer 1

此问题已在Chrome中修复。我还没有尝试过Firefox。将z-index更改为-1。

  input[type="checkbox"]::after {
      position: absolute;
      left: 0.675em;
      top: 0;
      line-height: 2;
      font-family: "Ionicons";
      content: "";
      letter-spacing: 1em;
      z-index: -1;
    }