0
カスタムラジオボタンを作成しようとしています。私は彼らにちょうどより大きい、白いボーダーを持たせたいとラジオボタンがチェックされるとき、私はそれに白い点を持ってほしいです。これと同じように：CSSカスタムラジオボタンが正しく機能しない
しかし、それは働いていない、私は...もう、可能であれば、私は純粋なCSSのソリューションを探してる をラジオボタンをチェックすることはできません。
これまで私が試したことは、関連する部分が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;
}
あなたはHTMLを変更することはできますか？もしそうなら、ラベルと入力要素を切り替えて、あなたのコードが機能します。 – Huelfe
あなたは正しいので、ラジオボタンをクリックすることができます。しかし、どうすればそれをすべて中央に置くことができますか？ – Insane
あなたのラベルに 'position：relative'を、あなたのラベルに' position：absolute'の後ろに。それからあなたはポジショニングをしなければなりません。 – Huelfe