Changing cursor to pointer on span within label

Question

I'm using pure CSS styling for radio buttons on a website (used from here) but am struggling to change the cursor to a pointer on the whole of the label and span within the labrl (which is what styles the appearance of the radio button itself).

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 replicated the scenario as a jsfiddle and set the cursor to pointer on the labels but when you hover over the radio buttons, the cursor returns to it's default state.

Is it possible to change the cursor to a pointer on radio button hover? I have tried setting a cursor: pointer on the span:hover but this did not seem to have any effect.

Loxodrome

Answer 1

Add to cursor: pointer;

.pureCSS input[type="checkbox"]:not(old), .pureCSS input[type="radio"]:not(old) {
    cursor: pointer;
    font-size: 1em;
    margin: 0;
    opacity: 0;
    padding: 0;
    width: 2em;
}

https://jsfiddle.net/csrr3axq/2/

Sunglasses

Thank you. Was trying to add it to the incorrect styles. Works great! :) – Loxodrome

Answer 2

Just add hope that could work.

input[type=radio]:hover{
  cursor: pointer;
}

Radiolucent