Custom radio buttons using CSS + CSS only changing backgrounds

index.html

<input checked data-tooltip='r' class='test1' name='test' type='radio' />
<input class='test2' data-tooltip='g' name='test' type='radio' />
<input class='test3' data-tooltip='b' name='test' type='radio' />
<div></div>

style.css

body, html{
  background: #fff;
  color: #000;
  height: 100%;
  padding: 5px;
  text-align: center;
  text-transform: capitalize;
}
.test1:checked  ~ div{ background: linear-gradient(red, white); }
.test2:checked ~ div{ background: linear-gradient(green, white) }
.test3:checked ~ div{ background: linear-gradient(blue, white) }

.test1:hover  ~ div{ background: linear-gradient(red, white); }
.test2:hover ~ div{ background: linear-gradient(green, white) }
.test3:hover ~ div{ background: linear-gradient(blue, white) }

input[type='radio']{
  -webkit-appearance: none;
  content: attr(data-tooltip);
  background-color: #444;
  margin: -5px 10px -4px 5px;
  border: double 10px #fff;
  cursor: pointer;
  width: 37px;
  height: 37px;
}

input[type='radio']:checked{
  content: '';
  background: #fff;
}

input[type='radio']:after{
  color: #444;
  padding: 0 5px 0;
  content: attr(data-tooltip);
  }

.test1:checked{
  border: double 10px red;
}

.test2:checked{
  border: double 10px green;
}

.test3:checked{
  border: double 10px blue;
}

div{
  position:absolute;
  margin-top: 13px;
  width: 98%;
  height: 90%;
  box-shadow: 0 -10px 10px -10px #444;
}

::selection{
  background: #000;
  color: #fff;
}