html - 如何将样式应用于选定单选按钮的标签

Question

是否可以使用以下标记仅使用 CSS 设置活动标签的样式：

<label class="inputOption" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>

一旦选择了里面的收音机，我想为标签添加一些背景样式。最好不要使用javascript。它适用于移动设备，因此不必在较旧的浏览器上运行。

Answer 1

为此，您可以为此使用 CSS :checked 属性。像这样写：

#one{
    position:relative;
}
#one:checked + span{
    display:inline-block;
    margin-left:-20px;
    padding-left:20px;
    background-color: #aa2233;
}

检查这个http://jsfiddle.net/5TxyJ/5/

Answer 2

当然，你应该添加第二个课程，让我们对标签说“活动”，只有选择单选按钮：

<style type="text/css">
    label.active {
      background-color: #aa2233;
    }
</style>
<label class="inputOption active" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>

见这里。