Radio button style/targeting experiment

by James Connolly

HTML

<form>
  <span>
  <input id="Rdio1" name="Rdios" type="radio" value="Otion 1">
  <label for="Rdio1">Option 1</label>
  </span>

  <span>
  <input id="Rdio2" name="Rdios" type="radio" value="Otion 2" >
  <label for="Rdio2">Option 2</label>
  </span>

  <span>
  <input id="Rdio3" name="Rdios" type="radio" value="Otion 3" >
  <label for="Rdio3">Option 3</label>
  </span>
</form>

CSS

body{
  padding: 15px;
}
body input[type="radio"]{
    opacity: 0;
}

input[type="radio"]+label {
    cursor: pointer;
    padding: 4px 10px;
    background: #2CA58D;
    color: #FFF;
    border-radius: 3px;
    transition: all 0.3s;
}

body input[type="radio"]+label:hover{
  opacity: 1;
}

/**** opacity for checked/unchecked ****/

/*input[type=radio]:not(:checked)+label{
  opacity: 0.5;
}

body input[type=radio]:checked+label{
  opacity: 1;
  transform: scale(1.1);
}*/

JavaScript

$("input[type=radio]").hover(function(){
	$("input[type=radio]:checked+label").css("opacity", "1");
  $("input[type=radio]:not(:checked)+label").css("opacity", "0.5");
});