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

Question

我最近一直在研究一些自定义复选框，现在发现它是一个挑战。然而，我已经非常接近完成它们了，并且在 Chrome 中进行了大量测试，我设法使它们变得完美。

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

JSFIDDLE

HTML:

<div class="fb-checkbox">
<br>
<br>
<input id="item21_0_checkbox" name="Project_type[]" type="checkbox" data-hint=""    value="Conference" /><label for="item21_0_checkbox" id="item21_0_label" ><span id="item21_0_span" class="fb-fieldlabel">Conference</span></label>
      <input id="item21_1_checkbox" name="Project_type[]" type="checkbox" value="Incentive campaign" /><label for="item21_1_checkbox" id="item21_1_label" ><span id="item21_1_span" class="fb-fieldlabel">Incentive campaign</span></label>
      <input id="item21_2_checkbox"  name="Project_type[]" type="checkbox" value="Incentive travel" /><label for="item21_2_checkbox" id="item21_2_label" ><span id="item21_2_span" class="fb-fieldlabel">Incentive travel</span></label>
      <input id="item21_3_checkbox" name="Project_type[]" type="checkbox" value="Awards dinner" /><label for="item21_3_checkbox" id="item21_3_label" ><span id="item21_3_span" class="fb-fieldlabel">Awards dinner</span></label>
      <input id="item21_4_checkbox" name="Project_type[]" type="checkbox" value="Product launch" /><label for="item21_4_checkbox" id="item21_4_label" ><span id="item21_4_span" class="fb-fieldlabel">Product launch</span></label>
      <input id="item21_5_checkbox" name="Project_type[]" type="checkbox" value="Hospitality" /><label for="item21_5_checkbox" id="item21_5_label" ><span id="item21_5_span" class="fb-fieldlabel">Hospitality</span></label>
     <input id="item21_6_checkbox" name="Project_type[]" type="checkbox" value="Comms and marketing" /><label for="item21_6_checkbox" id="item21_6_label" ><span id="item21_6_span" class="fb-fieldlabel">Comms and marketing</span></label>
      <input id="item21_7_checkbox" name="Project_type[]" type="checkbox" value="Reward &amp; Recoginition scheme" /><label for="item21_7_checkbox" id="item21_7_label" ><span id="item21_7_span" class="fb-fieldlabel">Reward &amp; Recoginition scheme</span></label>
      <input id="item21_8_checkbox" name="Project_type[]" type="checkbox" value="Design brief" /><label for="item21_8_checkbox" id="item21_8_label"><span id="item21_8_span" class="fb-fieldlabel">Design brief</span></label>
    </div>

CSS:

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

如果您单击其选中状态的框，并且在不同的浏览器中，您会注意到定位不正确，甚至星星的大小也略有不同...

编辑:我知道我的示例并没有显示它们完美对齐开始 - 只是对为什么它们的位置不同感兴趣

Answer 1

尝试为您的 :after 元素添加一个对应于元素高度的 line-height 用于显示星号，

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

这样一来，在我看来，在 Firefox 和 Opera 中就没问题了。 http://jsfiddle.net/mBWm3/1/