blocks|key|346234|text|检查这一点，您需要更改结构1+input后，没有办法选择直接先前的兄弟姐妹，使用您的代码(%2B)您要选择下一个兄弟姐妹。因此，您只需更改“标签”和“输入”的顺序，就可以工作了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|346235|​|346236|.ans{
++display:+none;
}
.answer+input[type="radio"]:checked%2Blabel{+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;
}|code-block|syntax|javascript|346237|<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>|346238|346239|entityMap^0|F|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Check this you need to change the structure 1st <code>input</code> after <code>label</code>  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 &quot;label&quot; and &quot;input&quot; and it will work</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="answer an1"&gt;
  &lt;div class="answer-inner"&gt;              
    &lt;input type="radio" name="q1" class="ans false" id="ans1"&gt;
    &lt;label class="ans-list" for="ans1"&gt;1&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="answer-inner"&gt;              
    &lt;input type="radio" name="q1" class="ans false" id="ans2"&gt;
    &lt;label class="ans-list" for="ans2"&gt;2&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="answer-inner"&gt;              
    &lt;input type="radio" name="q1" class="ans false" id="ans3"&gt;
    &lt;label class="ans-list" for="ans3"&gt;3&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="answer-inner"&gt;              
    &lt;input type="radio" name="q1" class="ans false" id="ans4"&gt;
    &lt;label class="ans-list" for="ans4"&gt;4&lt;/label&gt;
  &lt;/div&gt;
  &lt;button type="submit" name="Submit" class="submit"&gt;Submit&lt;/button&gt;
  &lt;button type="button" class="next hide" name="next"&gt;Next&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1434537|text|使用CSS，无法直接选择以前的兄弟姐妹，您的代码(%2B)将选择下一个兄弟姐妹。因此，您只需更改"label“和"input”的顺序，它就能工作，但它将更改页面上元素的顺序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1434538|选项1|offset|length|style|BOLD|1434539|保持布局不受影响的纯CSS解决方案是：|1434540|将标签和按钮包装在flex内。|unordered-list-item|1434541|用HTML交换标签和输入|1434542|flex-反转这个div|1434543|视觉上是一样的，但是现在可以应用CSS选择器了。|1434544|<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>
[.....]|code-block|syntax|javascript|1434545|这与纯CSS一起工作。|1434546|选项2|1434547|但是，imho，最好的选择是添加一个小js，将类添加到正确的标签中。它比较慢，但是|1434548|你可以推迟|1434549|它不会改变页面的布局和结构。|1434550|CSS部分|1434551|<style+type="text/css">
+
label.selected+{
+++background-color:+#FFA500;
}
</style>|1434552|Javascript部分|1434553|<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>|1434554|entityMap^0|0|0|3|0|0|0|0|0|0|0|0|0|3|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1I|8|@$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1L|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1M|8|@]|9|@]|A|$]]|$1|M|3|N|5|L|7|1N|8|@]|9|@]|A|$]]|$1|O|3|P|5|L|7|1O|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1P|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1Q|8|@]|9|@]|A|$V|W]]|$1|X|3|Y|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1S|8|@$D|1T|E|1U|F|G]]|9|@]|A|$]]|$1|11|3|12|5|6|7|1V|8|@]|9|@]|A|$]]|$1|13|3|14|5|L|7|1W|8|@]|9|@]|A|$]]|$1|15|3|16|5|L|7|1X|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|19|3|1A|5|U|7|1Z|8|@]|9|@]|A|$V|W]]|$1|1B|3|1C|5|6|7|20|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|U|7|21|8|@]|9|@]|A|$V|W]]|$1|1F|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|1G|$]]

<p>With CSS 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 &quot;label&quot; and &quot;input&quot; and it will work, but it will change the order of the elements on the page.</p>
<hr />
<p><strong>Option 1</strong></p>
<p>The pure CSS solution to keep the layout untouched would be:</p>
<ul>
<li>wrap label and button inside a flex div</li>
<li>swap label and input in HTML</li>
<li>flex-reverse this div</li>
</ul>
<p>Visually is the same, but now you can apply CSS selector</p>
<pre><code>&lt;style&gt;
.flex-rev {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
&lt;/style&gt;
&lt;div class=&quot;flex-rev&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;q1&quot; class=&quot;ans false&quot; id=&quot;ans1&quot;&gt;
    &lt;label class=&quot;ans-list&quot; for=&quot;ans1&quot;&gt;1&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;flex-rev&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;q2&quot; class=&quot;ans false&quot; id=&quot;ans2&quot;&gt;
    &lt;label class=&quot;ans-list&quot; for=&quot;ans2&quot;&gt;2&lt;/label&gt;
&lt;/div&gt;
[.....]
</code></pre>
<p>This work with pure CSS.</p>
<hr />
<p><strong>Option 2</strong></p>
<p>But, imho, the best option is adding a small js that add a class to the right label. It's slower but</p>
<ul>
<li>you can defer it</li>
<li>it doesn't change the layout and the structure of the page.</li>
</ul>
<p>CSS part</p>
<pre><code>&lt;style type=&quot;text/css&quot;&gt;
 
label.selected {
   background-color: #FFA500;
}
&lt;/style&gt;
</code></pre>
<p>Javascript part</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
   // Get all inputs
   document.querySelectorAll('input[type=&quot;radio&quot;]').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');
            }
         });         
      });
   })
&lt;/script&gt;
</code></pre>


<p>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 :</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="answer an1"&gt;
  &lt;label class="ans-list" for="ans1"&gt;1&lt;/label&gt;&lt;input type="radio" name="q1" class="ans false" id="ans1"&gt;&lt;br&gt;
  &lt;label class="ans-list" for="ans2"&gt;4&lt;/label&gt;&lt;input type="radio" name="q1" class="ans true" id="ans2"&gt;&lt;br&gt;
  &lt;label class="ans-list" for="ans3"&gt;3&lt;/label&gt;&lt;input type="radio" name="q1" class="ans false" id="ans3"&gt;&lt;br&gt;
  &lt;label class="ans-list" for="ans4"&gt;2&lt;/label&gt;&lt;input type="radio" name="q1" class="ans false" id="ans4"&gt;&lt;br&gt;
  &lt;button type="submit" name="Submit" class="submit"&gt;Submit&lt;/button&gt;
  &lt;button type="button" class="next hide" name="next"&gt;Next&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>(<a href="https://codepen.io/vip28/pen/ExQJqVw" rel="nofollow noreferrer">Codepen</a>)</p>
<p>I also tryed :</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>label{
  display:block;
  margin: 1rem auto;
  border-style:solid;
  width:50%;
}
input[type="radio"]:checked+label{
  background-color:red;
  color:red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="choice1"&gt; &lt;input type="radio" id="choice1" class="ans" name="op" checked="checked"&gt;male&lt;/label&gt;
&lt;label for="choice2"&gt; &lt;input type="radio" id="choice2" class="ans" name="op"&gt;male&lt;/label&gt;
&lt;label for="choice3"&gt; &lt;input type="radio" id="choice3" class="ans" name="op"&gt;male&lt;/label&gt;</code></pre>
</div>
</div>
</p>
<p>(<a href="https://codepen.io/vip28/pen/qBxwemy" rel="nofollow noreferrer">Codepen</a>)</p>


Label not change background color when my radio button checked

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

为什么我的标签框不改变颜色时，单选按钮选中？我也尝试使用input:checked+label或~label{语法}，但仍然没有效果：​.ans{  display: none;}.answer input[type="radio"]:checked+label{  background-color: #FFA500;...

问选中单选按钮时标签不更改背景色
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选中单选按钮时标签不更改背景色EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选中单选按钮时标签不更改背景色
EN