隐藏单选按钮并仅以 django 形式显示标签（单选）

Question

我想删除单选按钮，只显示是或否标签。为了做到这一点，我隐藏了无线电输入并使用 css3 选择器（：checked + label）根据选择更改背景颜色。但这由于某种原因不起作用。

HTML（来自 Django 模板）

<div class="questionnaire-radio">
    <label>
        <input class="selector" name="mdq_answer_1"   required="True" type="radio" value="y"> yes
    </label>
</div>

CSS

.questionnaire-radio input[type=radio] {
  display: none;
  padding-top: 20px;
}

.questionnaire-radio input[type=radio]:checked + label {
  background-color:  #28c3ab;
  font-weight: bold;
  text-transform: uppercase;
}

.questionnaire-radio label {
  font-weight: normal;
  width: 100%;
  border: solid #28c3ab;
  border-radius: 100px;
  margin: 0;
  cursor: pointer;
}

.questionnaire-radio label:hover {
  font-weight: bold;
  text-transform: uppercase;
  background-color: #28c3ab;
  cursor: pointer;
}

任何帮助将不胜感激。我使用 Chrome 作为我的浏览器。我对 jQuery 解决方案持开放态度（如有必要）。

Answer 1

要使用 input[type=radio]:checked + label 你想要的东西需要以某种方式格式化。输入需要高于您尝试访问的标签

看到它在这个小提琴中工作

http://jsfiddle.net/QBM5/egv8K/1/

<div class="questionnaire-radio">
<input id="aaa" class="selector" name="mdq_answer_1"   required="True" type="radio" value="y"  />
<label for="aaa">yes</label> 

<input id="bbb" class="selector" name="mdq_answer_1"   required="True" type="radio" value="n" />
<label for="bbb">no</label>

我做了一些假设并添加了一些标记以确保它可以正常工作，但是您应该能够按照此示例使其正常工作。