Forms CSS3自定义复选框-跨浏览器差异

我最近在做一些自定义复选框已经有一段时间了，我发现这是一个挑战。然而，我已经非常接近完成它们，并且已经在Chrome上进行了很多测试，我成功地使它们变得完美

然后我检查了其他浏览器，我的after状态呈现方式有一些明显的差异。如何解决这些差异？有可能吗？还是我只需要使用图像

HTML:

如果你点击复选框，在不同的浏览器中，你会注意到定位是关闭的，甚至星星的大小也略有不同

---

编辑：我知道我的示例并没有显示它们在开始时是完全对齐的-只是想知道为什么它们的位置不同

尝试添加一个与

元素高度对应的
行高度：在用于显示星号的
元素之后

input[type="checkbox"]:not(:checked) + label span:after,
input[type="checkbox"]:checked + label span:after {
  /* … */
  top: 0; /* modified */
  line-height: 13px;
}

有了这些，在Firefox和Opera中我觉得还可以
 很好！这给了我更多的垂直位置的一致性。关于星星大小的渲染有什么办法吗？或者这只是浏览器呈现该元素的方式的不同？Safari的显示比Chrome大得多，这可能是用于渲染星形字符的字体的问题。（如果字体堆栈中的字体不包含该字符的字形，那么浏览器将尝试以另一种字体找到它）。如果您想对此进行更多的控制，请考虑使用一个图标字体，该图标字体具有一个看起来恰如其分的星形字形。（或者可能根本不使用文本字符，但使用（背景）图像——可以是f.e.SVG。）我目前正在研究一种图标字体，希望能解决这个问题。我很快就回来报到！
input[type="checkbox"] {
display: none!important;
}

/*------ 1st checkboxes  ----*/

input[type="checkbox"]:not(:checked) + label span,
input[type="checkbox"]:checked + label span {
position: relative;
cursor: pointer;
}


input[type="checkbox"]:not(:checked) + label span:before,
input[type="checkbox"]:checked + label span:before {
content: '';
position: absolute;
right: 10px;
width: 15px; height: 15px;
border: 1px solid #a5a5b1;
background: none;
border-radius: 3px;
-webkit-box-shadow: inset 0px 0px 8px 0px rgba(50, 50, 50, 0.13);
-moz-box-shadow:    inset 0px 0px 8px 0px rgba(50, 50, 50, 0.13);
box-shadow:         inset 0px 0px 8px 0px rgba(50, 50, 50, 0.13);
margin: 0;
padding: 0;
}

input[type="checkbox"]:not(:checked) + label span:after,
input[type="checkbox"]:checked + label span:after {
content: '★';
position: absolute;
width: 15px; height: 15px;
top: -1px;
right: 10px;
font-size: 1.2em;
border-radius: 3px;
color: #ffc20e;
transition: all .5s;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
border: 1px solid #000000;
text-align: center;
vertical-align: middle;
}

input[type="checkbox"]:not(:checked) + label span:after {
opacity: 0;
transform: scale(0);
}

input[type="checkbox"]:checked + label span:after {
opacity: 1;
transform: scale(1);
}

input[type="checkbox"]:disabled:not(:checked) + label span:before,
input[type="checkbox"]:disabled:checked + label span:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}

input[type="checkbox"]:disabled:checked + label span:after {
color: #999;
}

input[type="checkbox"]:disabled + label span {
color: #aaa;
}

/* accessibility */
input[type="checkbox"]:checked:focus + label span:before,
input[type="checkbox"]:not(:checked):focus + label span:before {
 border: 1px dotted blue;
}

input[type="checkbox"]:not(:checked) + label span:after,
input[type="checkbox"]:checked + label span:after {
  /* … */
  top: 0; /* modified */
  line-height: 13px;
}