ラジオボタンの一例 #CSS

See the Pen ExgaPqj by 熊瀬川直也 (@momonoki1990) on CodePen.

デフォルトのラジオボタン(input[type="radio"])は`display: noneで消す
ラベルと消したラジオボタンのinputはfor属性で繋がっているので、ラベルだけ残しても大丈夫(ラベルをクリックしてもラジオボタンがクリックされたことになる)
ラジオボタンのラベル(label.radioLabel)はpadding-leftで右に寄せて、スペースを空けておく
ラジオボタンのラベル(label.radioLabel)に:beforeを指定して、上記で空いたスペースにカスタムのラジオボタンを挿入する
input[type="radio"]:checked + .radioLabel:afterでチェックされたラジオボタンの直後にあるラジオボタンのラベルに、:afterを指定して、チェックされたマークを挿入する。
ラジオボタンのラベル(label.radioLabel)にposition: relateveを、カスタムのラジオボタンやチェックされたマークにはposition:absoluteを指定して、ラベルに対する相対位置でカスタムのラジオボタンやチェックされたマークの位置を定める。
チェックされたラジオボタンの値は、getElementByIdで取得したform要素.ラジオボタンのname.valueで取得できる
innerHTMLはメソッドではない(x 要素.innerHTML() o 要素.innerHTML = "")

参考

CSSでラジオボタン・チェックボックスをデザイン装飾する
https://web.runland.co.jp/blog_cate2/post-2650