CSSを使用して、ラベルなしでラジオボタンを修正するfol = "id"？

Question

ラジオボタンがCSSに表示される方法を編集しようとしています。ボタンを囲んでいるラベルで機能し、機能のラベルを使用していません。言い換えれば

、私はこれを使用したくない：私はこれを使用したい

<input type="radio" name="rb" id="rb2" /> 
    <label for="rb2">Hello</label> 

を：

<label><input type="radio" name="rb" />Hello</label> 

この理由は、HTMLを動的に生成されていることであると私入力内にidやその他のフィールドを作成することはできません。ボタン/テキストを変更するためにCSSを追加すると、テキストのみにラベルを使用し、 "for"を使用する必要があるため、機能しません。ここでCSSは次のとおりです。

.container{ 
    display: block; 
    position: relative; 
    margin: 40px auto; 
    height: auto; 
    width: 500px; 
    padding: 20px; 
    font-family: 'Lato', sans-serif; 
    font-size:18px; 
    border:2px 
solid #ccc; 
overflow-y: scroll; 
resize: both; 
} 

.container input[type=radio]:checked ~ .check { 
    border: 5px solid #0DFF92; 
} 

.container input[type=radio]:checked ~ .check::before{ 
    background: #0DFF92; 
} 

.container input[type=radio]:checked ~ label{ 
    color: #0DFF92; 
} 

私は

<div class="container> 
    <label> <input type="radio" name="rb" value="Hello">Hello</label> 
<label><input type="radio" name="rb" value="Goodbye">Goodbye</label> 
    </div> 

任意の提案と

<div class="container> 
<input type="radio" name="rb" value="Hello" id=rb2"/> 
     <label for="rb2">Hello</label> 
<input type="radio" name="rb" value="Goodbye" id="rb3"/> 
     <label for="rb3">Goodbye</label> 
</div> 

でもないを置けばそれは動作しますか？どうもありがとうございます！

Answer 1

JavaScriptを使用する必要があります。あなたはcssでdomツリーをナビゲートすることはできないので、入力をラベルの中に入れ、CSSが入力に基づいてラベルに影響を与えるようにするためには、jsを使って変更を検出して適用する必要がありますその親にスタイリング。