CSS 伪选择器 ::before 和 ::after 将不会在 FF 44 和 IE11 中显示

Question

如果类型为“checkbox”和“radio”的输入样式是必需的，我创建了一些css信息:

input[type=checkbox].is-mandatory::before {
    position: absolute;
    left: -5px;
    top: -5px;
    border: solid 1px #A94442;
 border-radius: 4px;
    width: 22px;
    height: 22px;
    content: "";
}

input[type=checkbox].is-mandatory::after {
    position: absolute;
    left: -4px;
    top: -4px;
    border: solid 4px #F2DEDE;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    content: "";
}

<div class="checkbox">
    <label>
        <input class="is-mandatory" type="checkbox" id="chk0" name="chk0" value="0">
        A simple checkbox (mandatory)
    </label>
</div>

<div class="radio">
    <label>
        <input class="is-mandatory" type="radio" id="chk1" name="chk1" value="1">
        A radio (mandatory)
    </label>
</div>

不幸的是它似乎只显示在 Chrome 而不是在 FF44 和 IE11

styled checkbox and radio in chrome

为了在 IE 和 FF 中获得与 Chrome 相同的视图，css 声明中是否缺少某些内容？

Answer 1

抱歉，伪元素不支持输入。请检查下面的 link，但我不太确定这是否会对您有所帮助

http://arthurgouveia.com/prettyCheckable/

Answer 2

请记住，虽然输入不能有 :before 和 :after 伪元素，但 LABEL 可以。将标签设置为 "for" 属性等于输入的 name/id，这可能有助于解决一些问题。

CSS 伪选择器 ::before 和 ::after 将不会在 FF 44 和 IE11 中显示

CSS pseudo selectors ::before and ::after will not displayed in FF 44 and IE11

css

forms

firefox

internet-explorer

pseudo-element