<div>
  <label>
    <input type='radio' value='women' name='sex'>
    <span class='woman'>👩</span>
  </label>
  <label>
    <input type='radio' value='unknown' name='sex'>
    <span class='unknown'>👽</span>
  </label>
  <label>
    <input type='radio' value='man' name='sex'>
    <span class='man'>👨</span>
  </label>
</div>

input {
  display: none;
}

span {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid gray;
  margin: 5px;
  font-size: 40px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  opacity: 0.7;
}

input:checked ~ span {
  border: 1px solid green;
  background-color: lime;
  opacity: 1;
}