ラジオボタンでcheckしたところのlabel要素にcssを当てたい

Question

ラジオボタンのチェックしたところのlabel要素にcssを当てたいです。

<input type="radio" id="hoge1" class="hoge" name="hoge">
<label for="hoge1">test</label>

今回はラジオボタンのデフォルトのCSSを変更したいため、inputにはdisplay:none;を当て、labelの疑似要素でラジオボタンを表示しているとします。
上記のような場合チェックされたところにcssを当てる場合下記のように隣接セレクタを使ってcssを当てると思います。

.hoge {
 display: none;
}

label::before {
//ラジオボタンのcss
}

label::after {
//ラジオボタンのcss
}

input[type=radio]:checked + label::before {
//チェックした時のcss
}

input[type=radio]:checked + label::after {
//チェックした時のcss
}

ただHTMLの構造が下記のようにlabelタグ内にinputタグを入れるときはどのようにcssを記述すれば良いのでしょうか？

<label for="hoge1">test<input type="radio" id="hoge1" class="hoge" name="hoge"></label>

Answer 1

疑似要素:has() で親要素を参照できますが、まだ対応しているブラウザはないです。

:has() - CSS: カスケーディングスタイルシート | MDN

document.querySelector() では使えるのでJavaScriptでの対応になります。

追記

ただHTMLの構造が下記のようにlabelタグ内にinputタグを入れるときはどのようにcssを記述すれば良いのでしょうか？

よく考えたら、方法を思いつきました。

input は width: 0 で非表示にして、input自体の疑似要素でラジオボタンを表現すればいいだけでした。

<div class="radio">
  <label for="hoge1">test1<input type="radio" id="hoge1" class="hoge" name="hoge"></label>
  <label for="hoge2">test2<input type="radio" id="hoge2" class="hoge" name="hoge"></label>
</div>

.radio > label {
  position: relative;
  display: block;
  padding-left: 30px;
}

.hoge {
  width: 0;
  position: absolute;
  left: 0;
}

.hoge::before, .hoge:checked::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

.hoge::before {
  width: 15px;
  height: 15px;
  border: 1px solid #999;
}

.hoge:checked::after {
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #d01137;
}

CodePenサンプル

Comments

[odennkunn]

やはりそうなりますよね...
ご協力ありがとうございました！

[hatena19]

方法を思いつきましたので、回答に追記しました。ご参照ください。

Answer 2

こんな感じでどうでしょう

<style>
[name=hoge]{display:none;}

[name=hoge][data-index="1"]:checked ~ * label[data-index="1"]::before,
[name=hoge][data-index="2"]:checked ~ * label[data-index="2"]::before,
[name=hoge][data-index="3"]:checked ~ * label[data-index="3"]::before
{
content:"●";
}

[name=hoge][data-index="1"]:not(:checked) ~ * label[data-index="1"]::before,
[name=hoge][data-index="2"]:not(:checked) ~ * label[data-index="2"]::before,
[name=hoge][data-index="3"]:not(:checked) ~ * label[data-index="3"]::before
{
content:"○";
}
</style>
<input type="radio" id="hoge1" name="hoge" data-index="1">
<input type="radio" id="hoge2" name="hoge" data-index="2">
<input type="radio" id="hoge3" name="hoge" data-index="3">
<div>
<label for="hoge1" data-index="1">test1</label>
<label for="hoge2" data-index="2">test2</label>
<label for="hoge3" data-index="3">test3</label>
</div>

Comments

[odennkunn]

なるほど、こういった方法もあるんですね！参考にさせていただきます。
ご協力ありがとうございました！

[hatena19]

質問の「HTMLの構造が下記のようにlabelタグ内にinputタグを入れるとき」という条件に合致していないと思いますが。