CSS3 custom checkbox - cross-browser differences

问题

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...

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

回答1:

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

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

来源：https://stackoverflow.com/questions/22606776/css3-custom-checkbox-cross-browser-differences

标签

forms

css

cross-browser