#foo:checked::before,
input[type="checkbox"] {
position:absolute;
clip: rect(0,0,0,0);
clip: rect(0 0 0 0);
}
#foo:checked,
input[type="checkbox"] + label::before {
content: url('checkbox.png');
}
input[type="checkbox"]:checked + label::before {
content: url('checkbox-checked.png');
}
#foo doesn’t reference any particular element, it’s there purely to prevent browsers from implementing the later selectors if it doesn’t understand that (since most browsers will drop the entire selector if any part of it fails).
I use :root pseudoselector to do the same thing.
Thanks! Huge help!
Will this work for wpec?
This is super slick, but I am using this on an iPad 3 retina screen and now I’m not sure how to target the item with any manner to…retinize. Any thoughts?
Super old but thought I would leave this here in case anyone else was interested,
You need a pixel density media query, specified dimensions on you ::before and a 2X image asset,
Use use this http://bourbon.io/docs/#hidpi-media-query
Thanks – saved my life!
Great! very nice
Yes this seems nice, but I also need styling for radio buttons. Do you have anything for that?
Thanks,
Hello again,
in looking over the code I do not understand the
label::before
part of the code.
What does the html look like for this css?
It just seems to be incomplete without the other half of the picture.
Thank you
Reference url not working.
Thanks! It’s :: http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/
Please provide us a demonstration page??
yea we need a demo for this plz
Found of demo of this here: http://codepen.io/CreativeJuiz/pen/BiHzp
Thank you! This worked, except by default both my radio buttons (yes/no) are selected. Is there a way to fix this?
#foo:checked::before,
input[type=”radio”] {
position:absolute;
clip: rect(0,0,0,0);
clip: rect(0 0 0 0);
}
#foo:checked,
input[type=”radio”] + label::before {
content: url(‘images/gafl-radio-checked.png’);
}
input[type=”radio”]:checked + label::before {
content: url(‘images/gafl-radio-unchecked.png’);
}