我想删除单选按钮,只显示是或否标签。为了做到这一点,我隐藏了无线电输入并使用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解决方案持开放态度(如有必要)。
答案 0 :(得分:0)
要使用输入[type = radio]:选中+标签,您需要以某种方式格式化事物。输入需要高于您尝试访问的标签
看到它在这个小提琴中工作
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>
我做了一些假设并添加了一些标记以确保它有效,但是你应该能够按照这个例子让它工作。