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

我在我的网站上使用自定义复选框。我的问题是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;
}

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

HTML:

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;
}

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

---

这修复了Chrome的问题。我还没有在firefox上试用过。将z索引更改为-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;
    }

---

像

input

这样的自动关闭标签不支持

pseudo

css，比如

before

和

before