Radio buttons don't apply CSS on check - html

Question

I am trying to create two radio buttons that change color once the user selects them. However, once I select one of them they don't apply the supposed CSS:
.poller-nature-radio input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
#id_poller_nature label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
#id_poller_nature {
display: flex;
}
#id_poller_nature li {
list-style-type: none;
}
#id_poller_nature input[type="radio"]:checked + label {
background-color:#bfb;
border-color: #4c4;
}
<div class="fieldWrapper poller-nature-radio">
<label for="id_poller_nature_0">Nothing changes on select:</label>
<ul id="id_poller_nature">
<li><label for="id_poller_nature_0"><input type="radio" name="poller_nature" value="Choice 1" required="" id="id_poller_nature_0">
Question</label>
</li>
<li><label for="id_poller_nature_1"><input type="radio" name="poller_nature" value="Choice 2" required="" id="id_poller_nature_1">
Information</label>
</li>
</ul>
</div>

Answer 1

Since you used + css selector, the label should come as a sibling and come after the input. Check the below snippet.
.poller-nature-radio input {
position: fixed;
visibility: hidden;
}
#id_poller_nature label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
#id_poller_nature {
display: flex;
}
#id_poller_nature li {
list-style-type: none;
}
#id_poller_nature input[type="radio"]:checked + label {
background-color:#bfb;
border-color: #4c4;
}
<div class="fieldWrapper poller-nature-radio">
<label for="id_poller_nature_0">Click the button to see the change:</label>
<ul id="id_poller_nature">
<li>
<input
type="radio"
name="poller_nature"
value="Choice 1"
required=""
id="id_poller_nature_0"
/>
<label for="id_poller_nature_0"> Question</label>
</li>
<li>
<input
type="radio"
name="poller_nature"
value="Choice 2"
required=""
id="id_poller_nature_1"
/>
<label for="id_poller_nature_1"> Information</label>
</li>
</ul>
</div>

Answer 2

.poller-nature-radio input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
#id_poller_nature label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
#id_poller_nature {
display: flex;
}
#id_poller_nature li {
list-style-type: none;
}
#id_poller_nature_1:checked {
background-color:#bfb;
border-color: #4c4;
}
<div class="fieldWrapper poller-nature-radio">
<label for="id_poller_nature_0">Nothing changes on select:</label>
<ul id="id_poller_nature">
<li><label for="id_poller_nature_0"><input type="radio" name="poller_nature"
value="Choice 1" required="" id="id_poller_nature_0">
Question</label>
</li>
<li><label for="id_poller_nature_1"><input type="radio" name="poller_nature" value="Choice 2" required="" id="id_poller_nature_1">
Information</label>
</li>
</ul>
</div>
Try to access the input element using the individual id then handle the :check state

Answer 3

Change your HTML like this.
<ul id="id_poller_nature">
<li>
<input type="radio" name="poller_nature" value="Choice 1" required="" id="id_poller_nature_0">
<label for="id_poller_nature_0">`enter code
here`Question</label>
</li>