Can You Style an HTML Radio Button to Look Like a Checkbox

input[type=radio] {
  display: none;
}

input[type=radio] + label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 50%;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  /*padding-left: 0.2em;
  padding-bottom: 0.3em;*/
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
  font-size: 16px;
  text-align: center;
  line-height: 1.5em;
  vertical-align: middle;
}

input[type=radio] + label:active:before {
  transform: scale(0);
}

input[type=radio]:checked + label:before {
  background-color: #662D91;
  border-color: #662D91;
  color: #fff;
}

input[type=radio]:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}

input[type=radio]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

<span class="oneChoice">
  <input type="radio" value="tfa_79" class="" id="tfa_79" name="tfa_78">
  <label class="label postField" id="tfa_79" for="tfa_79">
  <span class="input-radio-faux"></span>Patient</label>
</span> 
<span class="oneChoice">
  <input type="radio" value="tfa_79" class="" id="tfa_791" name="tfa_78">
  <label class="label postField" id="tfa_791" for="tfa_791">
  <span class="input-radio-faux"></span>Patient</label>
</span>

styling checkbox and radio button

Seeing as you can't change your html, a pure css solution isn't available. You suggest that javascript is acceptable, so below is a solution using javascript and some modifications to your css:

Updated codepen

The method here is to iterate through your inputs in javascript, add unique IDs, surround the text nodes with a label matching said IDs, and add a class of "styled" (this along with the changes to the CSS means that, should a non-javascript browser encounter this page it will still display correctly according to OS defaults).

I've made a few other necessary changes to your CSS too, however it's a bit messy so you may want to play around with positioning etc.

The important thing, though, is that I've made no changes to the HTML :)

Disclaimer: I'm not very good with javascript so there's probably a better way of implementing this.

Javascript:

var checkboxesToStyle = document.querySelectorAll("input[type=checkbox]");

var radiosToStyle = document.querySelectorAll("input[type=radio]");

var plainLabel = null;
var labelText = null;
var newLabel = null;

for (var i = 0; i < checkboxesToStyle.length; i++) {
    checkboxesToStyle[i].id = "check" + i;
    plainLabel = checkboxesToStyle[i].nextSibling;
    labelText = plainLabel.nodeValue;
    plainLabel.remove();
    newLabel = document.createElement("label");
    newLabel.setAttribute("for", "check" + i);
    newLabel.innerHTML = labelText;
    checkboxesToStyle[i].parentNode.appendChild(newLabel);
    checkboxesToStyle[i].className = 'styled';
}

plainLabel = null;
labelText = null;
newLabel = null;

for (var i = 0; i < radiosToStyle.length; i++) {
    radiosToStyle[i].id = "radio" + i;
    plainLabel = radiosToStyle[i].nextSibling;
    labelText = plainLabel.nodeValue;
    plainLabel.remove();
    newLabel = document.createElement("label");
    newLabel.setAttribute("for", "radio" + i);
    newLabel.innerHTML = labelText;
    radiosToStyle[i].parentNode.appendChild(newLabel);
    radiosToStyle[i].className = 'styled';
}

How can I make the radio boxes in html look like checkboxes and make them have x's when checked?

Maybe this solution would make things easier for you.

I have written this function so you can use it on as many check boxes as you want. The only requirement it to give them a class of radio and the same name for that group of options.

jQuery Solution

$('input[type=checkbox][class=radio]').on('change', function(e) {  var Group = this.name;  $('input[type=checkbox][name=' + Group + '][class=radio]').prop('checked', false);  this.checked = true;});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h4>Eyes</h4>Blue <input type="checkbox" name="eyes" class="radio"> Green <input type="checkbox" name="eyes" class="radio"> Brown <input type="checkbox" name="eyes" class="radio"><h4>Hair</h4>Black <input type="checkbox" name="hair" class="radio"> Brown <input type="checkbox" name="hair" class="radio"> Ginger <input type="checkbox" name="hair" class="radio">