I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, display nothing after it. This is the code I have:
input[type=checkbox]::after
{
content: url(images/unchecked_after.gif);
position:relative;
left:15px;
z-index:100;
}
input[type=checkbox]:checked::after
{
content:"";
}
It works in Chrome but doesn't seem to be working in Firefox or IE. What is wrong?
The cross-browser solution that worked for me was to include an empty label (with class "checkbox_label") after the checkbox input and then style IT rather than the checkbox.
input[type=checkbox] + label:after
{
content: url(images/unchecked_after.gif);
position:relative;
left:0px;
top:1px;
z-index:100;
}
input[type=checkbox]:checked + label:after
{
content:"";
}
.checkbox_label
{
height:0px;
width:0px;
display:inline-block;
float:left;
position:relative;
left:20px;
z-index:100;
}
CoderOfHonor
Apparently, using the ::before and ::after pseudo-elements is not supported by the specification. Your question is answered here. Hope that helps!
来源：https://stackoverflow.com/questions/16429489/css-form-checkbox-styling-with-checked-and-after-tags