Menu
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?
288
A checkbox cannot be checked in CSS, unfortunately. It relies on the checked attribute of the input element, and attributes cannot be modified via CSS. Alternatively, you could look into a JavaScript solution, but of course the best way would be to edit the HTML directly.
A checkbox is an HTML element that takes input from the user. It is possible to style a checkbox using Pseudo Elements like :before, :after, hover and :checked. To style the checkbox the user first needs to hide the default checkbox which can be done by setting the value of the visibility property to hidden.
How to change color check in checkbox? Best option would be to inspect the element in chrome and then try your CSS there itself. Fastest way to achieve these type of CSS changes. Best option would be to inspect the element in chrome and then try your CSS there itself.
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;
}
Apparently, using the ::before and ::after pseudo-elements is not supported by the specification. Your question is answered here. Hope that helps!
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
