我最近一段时间以来一直在处理一些自定义复选框,发现这是一个挑战。但是,我已经接近完成它们,并且已经在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 & Recoginition scheme" /><label for="item21_7_checkbox" id="item21_7_label" ><span id="item21_7_span" class="fb-fieldlabel">Reward & 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;
}
如果在不同的浏览器中单击框以查看其选中状态,您会发现位置已关闭,甚至星星的大小也略有不同...
编辑:我知道我的示例并没有显示它们从一开始就完全对齐-只是对为什么它们的位置不同感兴趣
尝试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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句