css - 复选框刻度在Edge浏览器中显示为点

我有一个样式如下的复选框：

input[type="checkbox"] {
  position:relative;
  top:0.5em;
  -webkit-appearance: none;
  height: 1.25em;
  width: 1.25em;
  margin-right: 5px;
  vertical-align: top;
}

input {
  margin:0 0 0.2em 0;
  border-radius:0.1em;
  border:1px solid #d2d2d2;
  padding:0.8em;
  box-sizing:border-box;
  font-size:16px;
  color:black;
}

input[type="checkbox"]:checked::before{
  content: "\f00c";
  font-family:"FontAwesome";
  position: absolute;
  font-size: 1em;
  left: 0.15em;
  top:0.3em;
  text-align: center;
  width: 1.25em;
  color: #678b4f;
}

Jsfiddle here。

它在大多数浏览器中都很好看，直到现在，它似乎至少可以回溯到可忽略-webkit-appearance的更笨拙的浏览器中使用的东西。

但是，在Edge中，复选框的选中版本显示为一个几乎看不见的很小的点（而不是字体真棒）。如果删除-webkit-appearance，则显示可用的内容，但随后在Webkit浏览器中将其破坏。

有谁知道我该如何解决/解决这个问题？

最佳答案

由于input上的填充，它实际上不是一个点，而是一个超级小复选框。如果将其从0.8em更改为0.1em，您将明白我的意思。

将填充从输入元素移动到input[type="checkbox"]:checked::before选择器，它将在所有浏览器中都相同。