我正在使用自定义复选框。它在Chrome,Mozilla和Safari中运行良好,但在IE 11中无法正常显示。
我已经在Stack Overflow中进行了大多数尝试,以找到与此问题相关的答案,但是我找不到答案,所以我在这里问。请参见以下代码示例:
https://jsfiddle.net/spvkomd1/
.chk_bx label {
color: #333;
font-size: 16px;
font-weight: 500;
}
.custom_chk_bx {
padding-top: 15px;
}
.chk_bx {
padding-right: 20px;
}
/* Base for label styling */
.custom_chk_bx [type="checkbox"]:not(:checked),
.custom_chk_bx [type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
.custom_chk_bx [type="checkbox"]:not(:checked)+label,
.custom_chk_bx [type="checkbox"]:checked+label {
position: relative;
padding-left: 50px;
cursor: pointer;
margin-bottom: 0;
}
/* checkbox aspect */
.custom_chk_bx [type="checkbox"]:not(:checked)+label:before,
.custom_chk_bx [type="checkbox"]:checked+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 23px;
height: 24px;
border-style: solid;
border-width: 2px;
border-color: rgb( 192, 209, 218);
border-radius: 4px;
box-shadow: none;
}
/* checked mark aspect */
.custom_chk_bx [type="checkbox"]:not(:checked)+label::after,
.custom_chk_bx [type="checkbox"]:checked+label::after {
color: #0b8fcf;
content: "✔";
font-size: 16px;
left: 5px;
line-height: 100%;
position: absolute;
top: 5px;
transition: all 0.2s ease 0s;
}
/* checked mark aspect changes */
.custom_chk_bx [type="checkbox"]:not(:checked)+label:after {
opacity: 0;
transform: scale(0);
}
.custom_chk_bx [type="checkbox"]:checked+label:after {
opacity: 1;
transform: scale(1);
}
<div class="dtl_row">
<div class="custom_chk_bx inpt_blk">
<span class="chk_bx">
<input type="checkbox" id="test1" name="" value="">
<label for="test1">Compliant With PF(India)</label>
</span>
<span class="chk_bx">
<input type="checkbox" id="test2" name="" value="" checked="checked">
<label for="test2"> With ESIC(India)</label>
</span>
</div>
</div>
最佳答案
在本课程中添加行高
.custom_chk_bx [type="checkbox"]:not(:checked) + label::after, .custom_chk_bx [type="checkbox"]:checked + label::after {
color: #0b8fcf;
content: "✔";
font-size: 16px;
left: 5px;
line-height: 16px; /*Add This */
position: absolute;
top: 5px;
transition: all 0.2s ease 0s;
}
关于html - 复选框自定义样式在Internet Explorer 11中无法正确显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46113802/