Label not change background color when my radio button checked

Question

Why my label box not change the color when the radio button checked? I also try input:checked+label or ~label{ syntax} but still no effect :

.ans{
  display: none;
}
.answer input[type="radio"]:checked+label{
  background-color: #FFA500;
}

.ans-list{
  border-style:solid;
  border-width:thin;
  margin:20% auto;
  width:50%;
}
.ans-list:hover{
  background-color:#D6D5A8;
  color:black;
}

<div class="answer an1">
  <label class="ans-list" for="ans1">1</label><input type="radio" name="q1" class="ans false" id="ans1"><br>
  <label class="ans-list" for="ans2">4</label><input type="radio" name="q1" class="ans true" id="ans2"><br>
  <label class="ans-list" for="ans3">3</label><input type="radio" name="q1" class="ans false" id="ans3"><br>
  <label class="ans-list" for="ans4">2</label><input type="radio" name="q1" class="ans false" id="ans4"><br>
  <button type="submit" name="Submit" class="submit">Submit</button>
  <button type="button" class="next hide" name="next">Next</button>
</div>

(Codepen)

I also tryed :

label{
  display:block;
  margin: 1rem auto;
  border-style:solid;
  width:50%;
}
input[type="radio"]:checked+label{
  background-color:red;
  color:red;
}

<label for="choice1"> <input type="radio" id="choice1" class="ans" name="op" checked="checked">male</label>
<label for="choice2"> <input type="radio" id="choice2" class="ans" name="op">male</label>
<label for="choice3"> <input type="radio" id="choice3" class="ans" name="op">male</label>

(Codepen)

Answer 1

Check this you need to change the structure 1st input after label there is no way to select direct previous siblings, with your code (+) you are selecting the next sibling. So you can just change the order of "label" and "input" and it will work

.ans{
  display: none;
}
.answer input[type="radio"]:checked+label{ background-color: #FFA500;}

.ans-list{
 border-style: solid;
    border-width: thin;
    margin: 0;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ans-list:hover{
  background-color:#D6D5A8;
  color:black;
}
button {
    margin: 25px 0;
    padding: 15px;
    display: inline-block;
}

<div class="answer an1">
  <div class="answer-inner">              
    <input type="radio" name="q1" class="ans false" id="ans1">
    <label class="ans-list" for="ans1">1</label>
  </div>
  <div class="answer-inner">              
    <input type="radio" name="q1" class="ans false" id="ans2">
    <label class="ans-list" for="ans2">2</label>
  </div>
  <div class="answer-inner">              
    <input type="radio" name="q1" class="ans false" id="ans3">
    <label class="ans-list" for="ans3">3</label>
  </div>
  <div class="answer-inner">              
    <input type="radio" name="q1" class="ans false" id="ans4">
    <label class="ans-list" for="ans4">4</label>
  </div>
  <button type="submit" name="Submit" class="submit">Submit</button>
  <button type="button" class="next hide" name="next">Next</button>
</div>