css - 未呈现 Internet Explorer 'input:checked + label:before' 样式

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 伪元素用于事件状态，并在不透明度之间轻弹以相应地隐藏和显示它们.

感谢所有提供帮助的人。