CSS pseudo selectors ::before and ::after will not

问题:

To style inputs of type "checkbox" and "radio" if they are mandatory I created some css information:

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>

Unfortunately it seems only displayed in Chrome and not in FF44 and IE11

styled checkbox and radio in chrome

Is there someting missing in css declaration to get the same view in IE and FF like in Chrome?

回答1:

Keep in mind that while an input can't have a :before and :after pseudo-element, the LABEL can. Set your label to have a "for" attribute that's equal to the name/id of your input, and it might help solve some issues.

回答2:

Sorry but Pseudo elements doesn't support on input. Please check the link below but i am not pretty sure that this is gonna help you

http://arthurgouveia.com/prettyCheckable/