html - Use CSS to Modify Radio Buttons without Label fol="id"? -

i trying edit way radio buttons appear in css , trying label encompassing button , not using label function.

in other words, don't want use this:

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

i want use this:

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

the reason html dynamically generated , cannot create id or other field in input. when add css modify button/text doesn't work because requires label on text , "for" used. here 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; } 

it works if put

    <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> 

but not with

    <div class="container>    <label> <input type="radio" name="rb" value="hello">hello</label>  <label><input type="radio" name="rb" value="goodbye">goodbye</label>     </div> 

any suggestions? thank much!

you have use javascript. can't navigate dom tree in css, since want input inside label , css affect label based on the input, you'd have use js detect change , apply styling parent.