复选框刻度在边缘浏览器中显示为点

Question

我有一个样式的复选框：

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浏览器中将其分解。

任何人都知道如何解决这个问题？

Answer 1

它实际上不是一个圆点，它是一个超级小巧的复选框，因为input上有填充。如果您将其从0.8em更改为0.1em，您将看到我的意思。

将填充从输入元素移动到input[type="checkbox"]:checked::before选择器，它将适用于所有浏览器。

Answer 2

问题是Edge实际上支持-webkit属性，但-webkit-appearance的行为是意外的（可能是一个错误）。似乎添加此属性允许您将复选框设置为某种程度的样式，但仍然会呈现原始复选框。有趣的是，尽管将值设置为none，DOM检查员仍然显示它仍为checkbox：

Microsoft documentation对-webkit-appearance: none：

进行了以下说明

  

默认。元素的外观未更改。

请注意，它表示＆＃34;未更改＆＃34;当你期望＆＃34;没有呈现＆＃34;。文档似乎是关于IE的，所以我不确定它是否与Edge相关或者根本不相关。

一种可能的解决方法是黑客，它只针对Webkit浏览器。在实际选择器之前添加选择器body:not(*:root)：

body:not(*:root) input[type="checkbox"] {

Answer 3

你可以试试这个

    @supports (-ms-ime-align: auto) {
  input[type="checkbox"] {
      width:51px;height:51px;
  }
  input[type=checkbox]::-ms-check{
                                color:red;
                                border:0;
                                background:rgba(0,0,0,0);
                            }
}

这适用于IE Edge @supports (-ms-ime-align: auto)

选中此复选框时input[type=checkbox]::-ms-check