Accessibility issue, tabs not working for custom inputs - html

Question

I'm having an issue where only the initial checked input buttons are accessible by tabs. The inputs are set to 0 for visibility, so it should work as far as I can tell. I also tried tab-index, but that did not do anything. What am I doing wrong?
Here is the code in CodePen
.mainColorWrap input[type="radio"],
.imageSizeInputWrapOuter input[type="radio"] {
opacity: 0;
position: relative;
width: 0;
margin: 0 3px 0 0;
}
.mainColorWrap label {
display: inline-block;
background-color: #fff;
padding: 3px;
border: 1px solid #fff;
border-radius: 50%;
width: 50px;
height: 50px;
}
.mainColorWrap label:hover,
.mainColorWrap label:focus,
.frontColorWrap label:hover,
.frontColorWrap label:focus {
background-color: #000;
}
.mainColorWrap input[type="radio"]:focus + label {
border: 1px solid #777;
}
.mainColorWrap input[type="radio"]:checked + label {
background-color: #fff;
border-color: #777;
}
.radioButtonInner {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
}
<div class="mainColorWrap">
<form>
<input type="radio" name="colorOption" id="redCheck" value="red" class="mainColorRadiogroup" checked="" tabindex="0">
<label for="redCheck">
<div class="radioButtonInner" style="background-color: #c10e21;"></div>
</label>
<input type="radio" name="colorOption" id="greenCheck" value="green" class="mainColorRadiogroup" tabindex="0">
<label for="greenCheck">
<div class="radioButtonInner" style="background-color: #0ec155;"></div>
</label>
</form>
</div>