CSSでradioを修飾するときにlabelにidを振るのはエンジニアさんに苦笑いされる

ということで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よりかはいいのかな。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です