标签不改变背景颜色时，我的单选按钮选中

Question

为什么我的标签框在单选按钮选中时不改变颜色?我也尝试输入:checked+label或~label{语法}，但仍然没有效果:

.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)我也试过:

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="one_answers" name="op" checked="checked">male</label>
<label for="choice2"> <input type="radio" id="choice2" class="one_answers" name="op">male</label>
<label for="choice3"> <input type="radio" id="choice3" class="one_answers" name="op">male</label>

(Codepen)

Answer 1

检查这一点，你需要改变结构第一个input之后的label没有办法选择直接以前的兄弟姐妹，用你的代码(+)你选择下一个兄弟姐妹。所以你可以改变标签的顺序和";input"它会工作的

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

Answer 2

对于CSS，没有办法直接选择前面的兄弟姐妹，通过代码(+)，您可以选择下一个兄弟。所以你可以改变标签的顺序和";input"它可以工作，但是它会改变页面上元素的顺序。

---

选项1

保持布局不变的纯CSS解决方案是:

• 在div
• 在HTML中交换标签和输入

看起来是一样的，但是现在你可以应用CSS选择器

<style>
.flex-rev {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
</style>
<div class="flex-rev">
<input type="radio" name="q1" class="ans false" id="ans1">
<label class="ans-list" for="ans1">1</label>
</div>
<div class="flex-rev">
<input type="radio" name="q2" class="ans false" id="ans2">
<label class="ans-list" for="ans2">2</label>
</div>
[.....]

使用纯CSS。

---

选项2

但是，我认为，最好的选择是添加一个小js，将类添加到正确的标签。比较慢，但是

• 你可以推迟它
• 它不会改变页面的布局和结构。

CSS部分

<style type="text/css">

label.selected {
background-color: #FFA500;
}
</style>

Javascript部分

<script type="text/javascript">
// Get all inputs
document.querySelectorAll('input[type="radio"]').forEach(function(i){
// Add event listeners
i.addEventListener('change', function(e){
// when change, get all labels
document.querySelectorAll('label').forEach(function(l){
if (l.attributes.for.value == i.id) {
// If for match with ID, add selected class
l.classList.add('selected');
} else { 
// Clean others
l.classList.remove('selected');
}
});         
});
})
</script>