ラジオボタンをデフォルトのものではなく独自でデザインしたものにしたいときは、before,afterで疑似的にラジオボタンを作成します。
(参考:https://shu-sait.com/input-label-id-for/#outline__1)
その際もとのラジオボタンの代わりになるlabelにしっかりとradioのinputタグを紐づけなければボタンとしては機能しません。
example.html
<inputid="radio_button"type="radio"><labelfor="radio_button">ラベルテキスト</label>
inputタグをlabelタグで囲むやり方でも良いようです。
example2.html
<labelfor="radio_button">ラベルテキスト
<inputid="radio_button"type="radio"></label>
なぜこのような基本的なことに詰まったかというと、あるコードを改修する形でこの問題に面したのですが、その元のコードではこの紐づけをしなくても動いていたのです。
調べたところ読み込んでいるjsファイルにこれらを紐づけている記述がありました。
html+cssでできることは極力jsではやらないようにしよう(私の上司より)。