CSS Style Checkbox [duplicate] - html

Question

This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 8 years ago.
Actually I'm styling the radio button with this trick:
HTML:
<div class="radioButt" >
<h1>Radio:</h1>
<p>Val1 : <span></span><input type="radio" id="1" checked="checked" name="radio" ><span></span></p>
<p>Val2 : <span></span><input type="radio" id="2" name="radio" ><span></span></p>
<p>Val3 : <span></span><input type="radio" id="3" name="radio" ><span></span></p>
</div>
CSS:
.radioButt p {
padding: 10px;
}
.radioButt span{
position: relative;
right: 0;
width: 25px;
height: 25px;
line-height: 25px;
padding: 3px;
color: #FFF;
text-align: center;
background: #c06f59;
}
.radioButt span:after{
content: "no"; /*if CSS are disbled span elements are not displayed*/
}
.radioButt input{
position: relative;
right: 0;
margin: -26px;
width: 31px;
height: 31px;
/*hide the radio button*/
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
cursor: pointer;
}
.radioButt input[type="radio"] + span{ /*the span element that immediately follow the radio button */
visibility: hidden; /*temporarily hide the "YES" label*/
background: #6EB558;
}
.radioButt input[type="radio"] + span:after{
width: 30px;
display: inline-block;
content: "yes"; /*if CSS are disbled span elements are not displayed*/
}
.radioButt input[type="radio"]:checked + span{
visibility: visible; /*show the "YES" label only if the radio button is checked*/
}
A working example could be found at: http://jsfiddle.net/rzt3c/2/
I want to create the same effect also for the checkbox input.
I tried to add the type "checkbox" in the css but it seem to don't work...infact when the checkbox is checked id doesn't return unchecked. ( Here there is the code: http://jsfiddle.net/rkCMa/1/ )

Answer 1

UPDATED ANSWER
The reason below is still correct, but there's a much easier way to do it still with CSS (bearing usability restraints still...) by using the pointer-events style. Add this to your styles:
.radioButt span{
pointer-events: none;
}
That will allow the spans to be clicked through so the post span won't block the input anymore. This should answer your question, but do keep in mind some of the usibility issues mentioned in the comments to your original question.
The reason its not working is when it displays the "Yes" that span is over the input and so it is the span that is actually being clicked and not the input. I would change the formatting so that both of the spans are before the input, and use classnames on them to distinguish and style them rather than css selectors. Something like:
<div class="radioButt" >
<h1>Checkbox:</h1>
<p>Ck1 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck1" checked="checked" ></p>
<p>Ck2 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck2" ></p>
<p>Ck3 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck3" ></p>
</div>