IE中的复选框问题

Checkbox issue in IE

本文关键字：问题 复选框 IE      更新时间：2023-09-26

选中属性不是working IE8，下面是代码:

.chkBox {
    padding: 20px 4px 10px 11px;
}
.chkBox input[type="checkbox"]{
    display: none;
}
.chkBox input[type="checkbox"]+label span{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-color: white;
    border:2px solid black;
    cursor: pointer;
    margin-right:5px;
}
.chkBox input[type="checkbox"]:checked+label span{
    background-color:#000000;
    background-image: url(checkmarktick.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: 3px;
}
.chkBox label {
    color: #8c8c8c;
}


 <div class="chkBox">
    <input type="checkbox" id="hello" />
    <label for="hello"><span></span>Hello</label>
 </div>

摆弄摆弄https://jsfiddle.net/09tnf1bL/embedded/result/

我几乎尝试了所有其他插件，如slevtizr, IE7和checked- polyfill，但没有一个工作。谁能告诉我如何解决这个问题?

IE8不支持:checked CSS选择器。它只被添加到IE9。

查看此选择器和其他选择器的完整浏览器支持表。

有两种方法可以使用:

  1. 用[checked]代替。这将选择属性为checked的元素。

  2. 使用像Selectivizr这样的库来填充IE8，支持这个和其他新的CSS选择器

相关文章：