More than 3 years have passed since last update.

ラジオボタンの一例

Last updated at 2020-11-28Posted at 2020-11-28

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