<form>
  <input name="name" placeholder="Your name" />
  <h4>Are you a vegetarian?</h4>
  <div class="radio">
    <input type="radio" name="diet" value="veggie">
    <input type="radio" name="diet" value="meaty">
    <label></label>
  </div>
  <button>Submit</button>
</form>
<div class="output"></div>

.radio {
  position: relative;
  margin: 0 0 1em;
  
  // inputs
  input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  input:first-child {
    z-index: 1;
  }
  input:first-child:checked + input {
    z-index: 2;
  }

  // label content
  label:before {
    content: '?';
    display: inline-block;
    border: 1px solid black;
    text-align: center;
    width: 1em;
    margin-right: 0.5em;
    border-radius: 3px;
  }
  label:after {
    content: 'Make up your mind';
    display: inline-block;
  }  
  input:first-child:checked ~ label {
    color: green;
    &:before {
      content: "\2713";
    }
    &:after {
      content: "Yes!";
    }
  }
  input:nth-child(2):checked ~ label {
    color: red;
    &:before {
      content: "\00A0";
    }
    &:after {
      content: "No!";
    }
  }
}


button {
  display: block;
}

var form = document.querySelector('form');

function submit(e) {
  e.preventDefault();
  var output = document.querySelector('.output');
  var values = new URLSearchParams(new FormData(form)).toString()
  
  output.innerHTML = values;
}

form.addEventListener('submit', submit);