ということでid振らずに何とかならないかね、ということで考えてみたらどうせソースが少し汚れてしまうならばlabel内にspan置けばいいじゃないと。
<label><input type="radio" name="name" value="hoge" />hoge<span class="radio-checked"></span></label>
こんなかんじか。
inputの後ろじゃないとCSS的に指定ができないので注意。
あとはCSSを(以下はSass)
label { display: flex; position: relative; cursor: pointer; padding-left: 25px; margin-right: 20px; .radio-checked { position : absolute; left: 0; display : block; height: 17px; width: 17px; border-radius: 17px; border: 1px solid #000; &::after { position : absolute; content : ''; width : 11px; height : 11px; border-radius : 100%; left : 3px; top : 3px; background-color : transparent; z-index : 1; } &::after { } } input[type="radio"] { display: none; &:checked +.radio-checked { border-color: #f00; &::after { background-color : #f00; } } } }
こんな感じか。
横並びにするのにflex利用したりしてるけどこの辺は好みで好きなようにできそう。
label idよりかはいいのかな。