CSS3自定义复选框-跨浏览器差异 [英] CSS3 custom checkbox - cross-browser differences

问题描述

我最近一段时间以来一直在使用一些自定义复选框，发现这是一个挑战。但是，我已经接近完成它们，并且已经在Chrome中进行了很多测试，我设法使其完美。

I've recently been working on some custom checkboxes for a while now and have found it to be a challenge. However, I'm so close to finishing them and had been testing a lot in Chrome which I managed to get them perfect.

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

I then checked in the other browsers and there were some distinct differences in how my after state was rendered. How do you fix those differences? is it even possible? Or do I just have to use an image?

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

如果单击其选中状态框，并在其他浏览器中，注意定位已关闭，甚至恒星的大小也略有不同...

If you click the boxes for their checked state and in different browsers you'll notice positioning is off and even the size of the star is slightly different...

编辑：我知道我的示例并没有显示它们完全对齐即可-只是对为什么它们的位置不同感兴趣

I know my example doesn't show them perfectly align to start off with - just interested in why they're positioned differently

推荐答案

尝试添加 line-height 对应于：元素之后的元素高度用于显示星形，

Try adding a line-height corresponding to the element height for your :after elements used to display the star,

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/

With that, it looks OK to me in Firefox and Opera. http://jsfiddle.net/mBWm3/1/

这篇关于CSS3自定义复选框-跨浏览器差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！