I've implemented custom CSS styling for radio buttons on a website by following a guide (referenced from here), but I'm encountering difficulties in changing the cursor to a pointer when hovering over the label and span elements within the label that styles the radio button appearance.
Markup
<div class="demonstration pureCSS">
<div>
<input id="checkboxPureCSS1" type="checkbox" name="checkboxPureCSS" value="1" checked="checked"><label for="checkboxPureCSS1"><span></span>Option 1</label>
</div>
<div>
<input id="checkboxPureCSS2" type="checkbox" name="checkboxPureCSS" value="2"><label for="checkboxPureCSS2"><span></span>Option 2</label>
</div>
<div>
<input id="checkboxPureCSS3" type="checkbox" name="checkboxPureCSS" value="3"><label for="checkboxPureCSS3"><span></span>Option 3</label>
</div>
</div>
<br />
<div class="demonstration pureCSS">
<div>
<input id="radioPureCSS1" type="radio" name="radioPureCSS" value="1" checked="checked"><label for="radioPureCSS1"><span><span></span></span>Option 1</label>
</div>
<div>
<input id="radioPureCSS2" type="radio" name="radioPureCSS" value="2"><label for="radioPureCSS2"><span><span></span></span>Option 2</label>
</div>
<div>
<input id="radioPureCSS3" type="radio" name="radioPureCSS" value="3"><label for="radioPureCSS3"><span><span></span></span>Option 3</label>
</div>
</div>
CSS
.pureCSS input[type=checkbox]:not(old),
.pureCSS input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
.pureCSS input[type=checkbox]:not(old) + label,
.pureCSS input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
cursor: pointer;
}
.pureCSS input[type=checkbox]:not(old) + label > span,
.pureCSS input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
.pureCSS input[type=checkbox]:not(old):checked + label > span,
.pureCSS input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
.pureCSS input[type=checkbox]:not(old):checked + label > span:before{
content : '✓';
display : block;
width : 1em;
color : rgb(153,204,102);
font-size : 0.875em;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
font-weight : bold;
}
.pureCSS input[type=radio]:not(old):checked + label > span > span{
display : block;
width : 0.5em;
height : 0.5em;
margin : 0.125em;
border : 0.0625em solid rgb(115,153,77);
border-radius : 0.125em;
background : rgb(153,204,102);
background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102));
}
I have reproduced the issue in a jsfiddle, where the cursor reverts to its default appearance when hovering over the radio buttons. Despite trying to set cursor: pointer on span:hover, this change did not take effect. Is there a way to make the cursor remain as a pointer when hovering over the radio buttons?