我正在使用自定义复选框。它在Chrome,Mozilla和Safari中运行良好,但在IE 11中无法正常显示。

html - 复选框自定义样式在Internet Explorer 11中无法正确显示-LMLPHP

我已经在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/

10-12 12:47
查看更多