Internet Explorer的输入:选中+标签:在未呈现样式之前

Question

我在:checked为自定义复选框设置样式时遇到了一些麻烦,无法在Internet Explorer中显示.

它们在Chrome中运行得非常好.

......但在IE中

这是相关的造型

input[type="radio"], input[type="checkbox"] {
    opacity: 1;
    position: absolute;
    top: -9999;

    & + label {
        vertical-align: middle;
    }
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
    content: '\f3fd';
    font-family: 'Ionicons';
    width: 26px;
    height: 20px;
    border: 2px solid #45555F;
    font-size: 24px;
    color: transparent;
    display: table-cell;
    text-align: center;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    padding: 0 2px;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    content: '\f383';
    font-family: 'Ionicons';
    font-size: 24px;
    width: 26px;
    height: 20px;
    text-align: center;
    display: table-cell;
    padding: 0 2px;
    border: 2px solid #45555F;
    color: #8ec549;
}

input[type="radio"] + label:before {
    border-radius: 50% !important;
}

我也注意到Internet Explorer只是在加载时删除了样式...

谢谢你的帮助!

编辑:Codepen演示(这个演示在IE中也不起作用)

http://codepen.io/anon/pen/rLJqyK

Answer 1

与在修复时修改:before伪元素相反,我只是将:after伪元素用于活动状态,并在不透明度之间轻弹以隐藏并相应地显示它们.

感谢任何帮助过的人.