CSS Style Checkbox

Question

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/ )

Have a look at this possible similar question that could help you solve your issue. http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css — Zack, Jan 17 '13 at 19:16
It works for me in Opera, except the yes is not clickable (only slightly above the top). Also the lower two are marked "radio" and not "checkbox" in http://jsfiddle.net/rkCMa/1/ — SmartK8, Jan 17 '13 at 19:28
You have a mistake in your fiddle where you put the `type=radio` for the second two inputs, not related to the problem, but thought I'd let you know. — DigTheDoug, Jan 17 '13 at 19:31
You do realize that CSS generated content is not reliably available to screen reader users and you're presenting them with something that is completely inaccessible? — steveax, Jan 17 '13 at 19:35

DigTheDoug · Answer 1 · 2013-01-17T20:06:34.497

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>

CSS Style Checkbox

1 Answers1

UPDATED ANSWER