检查后更改单选按钮根本不起作用答案

【问题标题】：Change of radio button after checking does not work at all检查后更改单选按钮根本不起作用
【发布时间】：2017-01-11 01:33:26
【问题描述】：

我想做一个测验，单选按钮在被选中后会改变颜色。我创建了以下示例，但单击不会按预期更改背景。

HTML：

<div id="quiz">

      <input name="question_id" value="2" type="hidden">
      <ul class="list-inline">


            <label for="id_answers_0"><input id="id_answers_0" name="answers" value="5" type="radio"> None</label>



            <label for="id_answers_1"><input id="id_answers_1" name="answers" value="6" type="radio"> A little</label>



            <label for="id_answers_2"><input id="id_answers_2" name="answers" value="7" type="radio"> A lot</label>



            <label for="id_answers_3"><input id="id_answers_3" name="answers" value="8" type="radio"> Enormous</label>


      </ul>
</div>

CSS：

#quiz {
    margin:4px;
    text-align:center;
    float:left;
    font-size: 16px;
    padding:13px 0px;
    width : 100%;


}

#quiz label {
    float:left;
    width:170px;
    padding : 5%;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;

}

#quiz label:hover {
    background-color: green;
    color: white;
}

input[type="radio"]:checked+label{ background:black; }  


#quiz label input {
    position:absolute;
    top:-20px;

}

Jsfiddle 示例： http://jsfiddle.net/n5xb4b9v/

干杯

【问题讨论】：

标签： html css radio-button checked

【解决方案1】：

这是一个工作示例，http://jsfiddle.net/n5xb4b9v/3/

我把html改成了这个

<div id="quiz">

      <input name="question_id" value="2" type="hidden">
      <ul class="list-inline">


            <input id="id_answers_0" name="answers" value="5" type="radio"><label for="id_answers_0"> None</label>



           <input id="id_answers_1" name="answers" value="6" type="radio"><label for="id_answers_1"> A little</label>



            <input id="id_answers_2" name="answers" value="7" type="radio"><label for="id_answers_2"> A lot</label>



            <input id="id_answers_3" name="answers" value="8" type="radio"><label for="id_answers_3"> Enormous</label>


      </ul>
</div>

并将其添加到您的 CSS 中

input[type=radio] {
   display: none;
 }
#quiz input[type="radio"]:checked + label {
   background-color: black;
 }

【讨论】：

【解决方案2】：

对不起，伙计，我没有对齐和评论代码你的主要错误 - css 中的 + + 选择器表示：

标签1 + 标签2 { 风格 }

这意味着，只有当这个标签放在 tag1（不是子标签）之后，tag2 才会设置样式

<div id="quiz">
  <input name="question_id" value="2" type="hidden">
  <ul class="list-inline">  
       <input id="id_answers_0" name="answers" value="5" type="radio">   
         <label for="id_answers_0">None</label>

         <input id="id_answers_1" name="answers" value="6" type="radio">
         <label for="id_answers_1"> A little</label>

         <input id="id_answers_2" name="answers" value="7" type="radio">
         <label for="id_answers_2"> A lot</label>

         <input id="id_answers_3" name="answers" value="8" type="radio">
         <label for="id_answers_3"> Enormous</label>


  </ul>
</div>

http://jsfiddle.net/014kpxpz/

【讨论】：