I'm trying to customize the radio and checkboxes using only css. I'm almost there except 2 little details: here is a markup sample:
<section>
<label class="cbox radio">
<input name="how" type="radio" checked="checked" /> My first radio box
</label>
<label class="cbox radio">
<input name="how" type="radio" /> My second radio box
</label>
<label class="cbox radio">
<input name="how" type="radio" /> My third radio box
</label>
</section>
<section>
<label class="cbox box">
<input name="check1" type="checkbox" checked="checked" /> My first box
</label>
<label class="cbox box">
<input name="check2" type="checkbox" /> My second box
</label>
</section>
Every thing works fine but i can't make it work when the box is checked. I'm trying to use this pseudo class:
*::before, *::after {
box-sizing: border-box;
}
.cbox {
display: block;
position: relative;
margin: 10px 0;
padding-left: 35px;
cursor: pointer;
}
.cbox > input {
position: absolute;
left: -9999px;
}
.cbox::before, .cbox::after {
content: '';
position: absolute;
top: 0;
left: 0;
}
.cbox.radio::before, .cbox.radio::after {
border-radius: 50%;
}
.cbox::before {
display: block;
width: 20px;
height: 20px;
border: 1px solid #c1caca;
}
.cbox::after {
display: none;
width: 12px;
height: 12px;
margin: 4px;
background-color: #2e4a5d;
box-shadow: inset 0 15px 23px -10px rgba(187,230,240,.3),0 2px 2px rgba(0,0,0,.1);
}
/*input:checked + .cbox::before, input:hover + .cbox::before, */
.cbox.on::before, .cbox:hover::before {
background-color: #eaf1f6;
border-color: #a0afbb;
}
/* input:checked + .cbox::after, */
.cbox.on::after {
display: block;
}
And here the jquery
$(".cbox input").change(function() {
if($(this).is(':checked')) $(this).parent('label').toggleClass('on');
});
1- is there a way to make this css work?
2- since the selector :checked is only supported on IE9+, is it recommended to use selectivizr ? or is there a better fallback solution?
Thanks a lot