CSS Custom Radio Buttons don't work properly - html

Question

I'm trying to build my custom radio buttons. I want them to just have a bigger, white border and when the radio button is checked I want to have a white dot in it. Like so:
https://ibb.co/iBjJHk
But it's not working, I can't check the radio button anymore...
I'm searching for a pure CSS solution if possible.
Here is what I tried so far, the relevant part is at the top of the CSS.
https://codepen.io/Insane415/pen/zzoBmp
HTML
<table class="pricing-table">
<tr>
<td id="table-heading"><h1>Leistungen & Preise Telefonservice</h2></td>
<td>
<label for="test">AllIn-Order</label>
<input type="radio" id="test" name="tarif-top">
</td>
<td class="red-background">AllIn-Time<br>
<input type="radio" checked name="tarif-top" value="allin-time"/></td>
<td>AllIn-Contact<br>
<input type="radio" name="tarif-top" value="allin-contact"/></td>
<td>
Enterprise<br>
<input type="radio" name="tarif-top" value="enterprise"/>
</td>
</tr>
<tr>
<td>Monatliche Grundgebühr</td>
<td colspan="3">nur 59,90€</td>
<td>individuell</td>
</tr>
<tr>
<td>Telefonische Annahmezeit</td>
<td colspan="3">Mo-Fr 08:00 bis 19:00 Uhr</td>
<td>24/7</td>
</tr>
<tr>
<td>Kosten pro Minute/Kontakt</td>
<td>0,69€/Minute</td>
<td class="red-background">0,89€/Minute</td>
<td>3,00€/Kontakt</td>
<td>individuell</td>
</tr>
<tr>
<td>Transaktionsgebühren</td>
<td>12,5%/Bestellung</td>
<td class="red-background">—</td>
<td>—</td>
<td>individuell</td>
</tr>
<tr id="services">
<td>Enthaltene Leistungen</td>
</tr>
<tr>
<td>Englischsprachiger Telefonservice</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Kundenservice für Markplätze</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Bestellannahme für Waren</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Anrufnotiz via E-Mail</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Anrufnotiz via E-Mail</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Monatliches Reporting</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Weiterleitung Festnetz (DE)</td>
<td colspan="3">0,09€/Minute</td>
<td>Check</td>
</tr>
<tr>
<td>Weiterleitung Mobilfunknetz (DE)</td>
<td colspan="3">0,25€/Minute</td>
<td>Check</td>
</tr>
<tr>
<td>Buchungsannahme</td>
<td colspan="3">—</td>
<td>Check</td>
</tr>
<tr>
<td>Outbound-Kampagnen</td>
<td colspan="3">—</td>
<td>Check</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" value="allin-order" name="tarif-bottom"/>
<br>AllIn-Order
</td>
<td class="red-background">
<input type="radio" checked name="tarif-bottom" value="allin-time"/>
<br>AllIn-Time
</td>
<td>
<input type="radio" name="tarif-bottom" value="allin-contact"/>
<br>AllIn-Contact
</td>
<td>
<input type="radio" name="tarif-bottom" value="enterprise"/>
<br>Enterprise
</td>
</tr>
</table>
CSS
/*BEGIN Custom Radio Button*/
#test{
display: none;
}
label:before{
content: '';
width: 25px;
height: 25px;
border: 3px solid white;
display: inline-block;
border-radius: 100%;
position: absolute;
top: 50px;
}
input[type="radio"]:checked + label:after{
content: '';
width: 15px;
height: 15px;
border-radius: 100%;
background-color: white;
display: inline-block;
}
label:hover{
cursor: pointer;
}
/*END Custom Radio Button*/
.pricing-table{
text-align: center;
}
.pricing-table td{
background-color: #ccc;
padding: 12px;
}
.pricing-table tr td:first-child{
background-color: #ddd;
text-align: left;
}
.pricing-table tr td:last-child{
}
.pricing-table tr:last-child td:first-child{
background-color: white;
}
.pricing-table #services td, #table-heading{
font-weight: 600;
background-color: white;
}
.pricing-table tr:first-child td:nth-of-type(1n+2), .pricing-table tr:last-child td {
background-color: #545067;
color: white;
}
.red-background{
color: white!important;
background-color: #E22C26!important;
}
/* BEGIN Radio Buttons*/
/*END Radio Buttons*/
.tarif-choice hr{
border-color: #E22C26;
}
ul.optional {
background-color: #ddd;
padding: 0;
}
ul.optional input{
margin-right: 10px;
margin-left: 15px;
}
ul.optional li{
list-style-type: none;
border-top: 1px solid silver;
}
ul.optional p{
margin-left: 30px;
margin-top: 0;
margin-bottom: 0;
}
ul.optional p:before {
content: "•";
margin-right: 6px;
}
.checkbox-holder{
margin-left: 25px;
}
.checkbox-holder .checkbox-space{
margin-left: 50px;
}

Answer 1

Please see below. Added CSS for label and fixed a few settings for label:after. Since your CSS uses input + label, it is important input is specified before the label in your HTML (changed below).
$('input[type="radio"]').change(function(){
if($(this).val()=='allin-order'){
$(":radio[value=allin-order]").prop("checked", true);
$(".pricing-table td").removeClass("red-background");
$(".pricing-table tr:first-child td:nth-of-type(2)").addClass("red-background");
$(".pricing-table tr:nth-of-type(4) td:nth-of-type(2)").addClass("red-background");
$(".pricing-table tr:nth-of-type(5) td:nth-of-type(2)").addClass("red-background");
$(".pricing-table tr:last-child td:nth-of-type(2)").addClass("red-background");
};
if($(this).val()=='allin-time'){
$(":radio[value=allin-time]").prop("checked", true);
$(".pricing-table td").removeClass("red-background");
$(".pricing-table tr:first-child td:nth-of-type(3)").addClass("red-background");
$(".pricing-table tr:nth-of-type(4) td:nth-of-type(3)").addClass("red-background");
$(".pricing-table tr:nth-of-type(5) td:nth-of-type(3)").addClass("red-background");
$(".pricing-table tr:last-child td:nth-of-type(3)").addClass("red-background");
};
if($(this).val()=='allin-contact'){
$(":radio[value=allin-contact]").prop("checked", true);
$(".pricing-table td").removeClass("red-background");
$(".pricing-table tr:first-child td:nth-of-type(4)").addClass("red-background");
$(".pricing-table tr:nth-of-type(4) td:nth-of-type(4)").addClass("red-background");
$(".pricing-table tr:nth-of-type(5) td:nth-of-type(4)").addClass("red-background");
$(".pricing-table tr:last-child td:nth-of-type(4)").addClass("red-background");
};
if($(this).val()=='enterprise'){
$(":radio[value=enterprise]").prop("checked", true);
$(".pricing-table td").removeClass("red-background");
$(".pricing-table tr:first-child td:nth-of-type(5)").addClass("red-background");
$(".pricing-table tr:nth-of-type(4) td:nth-of-type(5)").addClass("red-background");
$(".pricing-table tr:nth-of-type(5) td:nth-of-type(5)").addClass("red-background");
$(".pricing-table tr:last-child td:nth-of-type(5)").addClass("red-background");
};
});
/*BEGIN Custom Radio Button*/
#test{
display: none;
}
label { display: inline-block; position: relative; }
label:after{
content: '';
width: 25px;
height: 25px;
border: 3px solid white;
border-radius: 50%;
position: absolute;
top: 25px;
right: 25px;
}
input[type="radio"]:checked + label:after{
content: '';
width: 25px;
height: 25px;
border: 3px solid white;
border-radius: 50%;
background: white;
display: inline-block;
}
label:hover{
cursor: pointer;
}
/*END Custom Radio Button*/
.pricing-table{
text-align: center;
}
.pricing-table td{
background-color: #ccc;
padding: 12px;
}
.pricing-table tr td:first-child{
background-color: #ddd;
text-align: left;
}
.pricing-table tr td:last-child{
}
.pricing-table tr:last-child td:first-child{
background-color: white;
}
.pricing-table #services td, #table-heading{
font-weight: 600;
background-color: white;
}
.pricing-table tr:first-child td:nth-of-type(1n+2), .pricing-table tr:last-child td {
background-color: #545067;
color: white;
}
.red-background{
color: white!important;
background-color: #E22C26!important;
}
/* BEGIN Radio Buttons*/
/*END Radio Buttons*/
.tarif-choice hr{
border-color: #E22C26;
}
ul.optional {
background-color: #ddd;
padding: 0;
}
ul.optional input{
margin-right: 10px;
margin-left: 15px;
}
ul.optional li{
list-style-type: none;
border-top: 1px solid silver;
}
ul.optional p{
margin-left: 30px;
margin-top: 0;
margin-bottom: 0;
}
ul.optional p:before {
content: "•";
margin-right: 6px;
}
.checkbox-holder{
margin-left: 25px;
}
.checkbox-holder .checkbox-space{
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="pricing-table">
<tr>
<td id="table-heading"><h1>Leistungen & Preise Telefonservice</h2></td>
<td>
<input type="radio" id="test" name="tarif-top">
<label for="test">AllIn-Order</label>
</td>
<td class="red-background">AllIn-Time<br>
<input type="radio" checked name="tarif-top" value="allin-time"/></td>
<td>AllIn-Contact<br>
<input type="radio" name="tarif-top" value="allin-contact"/></td>
<td>
Enterprise<br>
<input type="radio" name="tarif-top" value="enterprise"/>
</td>
</tr>
<tr>
<td>Monatliche Grundgebühr</td>
<td colspan="3">nur 59,90€</td>
<td>individuell</td>
</tr>
<tr>
<td>Telefonische Annahmezeit</td>
<td colspan="3">Mo-Fr 08:00 bis 19:00 Uhr</td>
<td>24/7</td>
</tr>
<tr>
<td>Kosten pro Minute/Kontakt</td>
<td>0,69€/Minute</td>
<td class="red-background">0,89€/Minute</td>
<td>3,00€/Kontakt</td>
<td>individuell</td>
</tr>
<tr>
<td>Transaktionsgebühren</td>
<td>12,5%/Bestellung</td>
<td class="red-background">—</td>
<td>—</td>
<td>individuell</td>
</tr>
<tr id="services">
<td>Enthaltene Leistungen</td>
</tr>
<tr>
<td>Englischsprachiger Telefonservice</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Kundenservice für Markplätze</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Bestellannahme für Waren</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Anrufnotiz via E-Mail</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Anrufnotiz via E-Mail</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Monatliches Reporting</td>
<td colspan="3">Check</td>
<td>Check</td>
</tr>
<tr>
<td>Weiterleitung Festnetz (DE)</td>
<td colspan="3">0,09€/Minute</td>
<td>Check</td>
</tr>
<tr>
<td>Weiterleitung Mobilfunknetz (DE)</td>
<td colspan="3">0,25€/Minute</td>
<td>Check</td>
</tr>
<tr>
<td>Buchungsannahme</td>
<td colspan="3">—</td>
<td>Check</td>
</tr>
<tr>
<td>Outbound-Kampagnen</td>
<td colspan="3">—</td>
<td>Check</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" value="allin-order" name="tarif-bottom"/>
<br>AllIn-Order
</td>
<td class="red-background">
<input type="radio" checked name="tarif-bottom" value="allin-time"/>
<br>AllIn-Time
</td>
<td>
<input type="radio" name="tarif-bottom" value="allin-contact"/>
<br>AllIn-Contact
</td>
<td>
<input type="radio" name="tarif-bottom" value="enterprise"/>
<br>Enterprise
</td>
</tr>
</table>
<!-- END table -->
<h2>Buchungsübersicht</h2>
<div class="row">
<div class="col-md-6">
<div class="tarif-choice">
<p>Ihre Tarifauswahl</p>
<hr/>
<div class="allin-time">
<ul>
<li>mtl. Grundgebühr 59,90€</li>
<li>0,89€/Minute</li>
<li>Servicezeit: Mo-Fr 08:00-19:00 Uhr</li>
</ul>
<ul class="check">
<li>Mehrsprachiger Telefonservice</li>
<li>Bestellannahme für Waren</li>
<li>Buchungsannahme</li>
<li>Anrufnotiz via E-Mail</li>
<li>Monatliches Reporting</li>
<li>Einzelverbindungsnachweis</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<p>Optionale Leistungen | | Diese Leistungen werden nur abgerechnet,
soweit Sie sich aktiv für den Service entschieden haben
<ul class="optional">
<li><input type="checkbox"/>Service Zeit 24/7
<p class="dot">Kosten: 19,90 €/E-Mail</p>
</li>
<li><input type="checkbox"/>Anrufnotiz via SMS
<p class="dot">Kosten: 0,20 €/SMS</p>
</li>
<li><input type="checkbox"/>E-Mail-Service
<p class="dot">Servicezeit: Mo-Fr 08:00-19:00 Uhr</p>
<p class="dot">Kosten: 4,49 €/E-Mail</p>
</li>
<li><input type="checkbox"/>Chat-Service
<p class="dot"/>Live-Chat. WhatsApp & Facebook-Messenger Service</p>
<p class="dot"/>Servicezeit: Mo-Fr 08:00-19:00 Uhr</p>
<p class="dot"/>Kosten (2 Abrechnungsmodelle möglich): </p>
<div class="checkbox-holder">
<input type="checkbox"/>5,49€/Chat
<span class="checkbox-space"><input type="checkbox"/>0,69€/Minute</span>
</div>
</li>
<li><input type="checkbox"/>Click-to-Message Service
<p class="dot"/>Servicezeit: Mo-Fr 08:00-19:00 Uhr</p>
<p class="dot">0,20 €/SMS</p>
</li>
</ul>
</div>
</div>