Question

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

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

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

尝试添加与用于显示星标的line-height元素的元素高度相对应的:after，

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/

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

1 个答案: