Html 单击单选按钮时如何突出显示标签？

我想突出显示单选按钮的标签，当我点击它时，我发现但不起作用。这是我的代码：

HTML

<div class="same-line">
    <input type="checkbox" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label class="checkbox">
    Jornadas de género (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div> 
<div class="same-line">
    <input type="checkbox" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label class="checkbox">
    Curso de fotografía (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div>

有什么想法吗？

HTML：

（我在复选框中添加了

id

属性，并在标签上添加了

属性的
）

现场演示：

HTML：

<div class="same-line">
    <input type="checkbox" id="checkbox1" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label for="checkbox1">
    Jornadas de género (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div> 
<div class="same-line">
    <input type="checkbox" id="checkbox2" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label for="checkbox2">
    Curso de fotografía (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div>

.same-line input[type='checkbox'] {
    display:none;
}

.same-line label {
    display:inline-block;
        font-size: 12.2pt;
    background-color:#fff;
}

.same-line input[type='checkbox']:checked + label {
   background-color: #ddd;
}

JSFIDLE:
哦，那是我的答案
：）
你在哪个浏览器中测试这个？你没有单选按钮，你是说复选框吗？是的@ŠimeVidas，因此我把链接放在了q/a上，这是最清楚的情况。保罗，我用的是Chrome 20。@Distriker你想要复选框还是单选按钮？
.same-line input[type='checkbox'] {
    display:none;
}

.same-line label.checkbox {
    display:inline-block;
        font-size: 12.2pt;
}

.same-line input[type='checkbox']:checked + label.checkbox { 
   background-color: #FFBF00;
}

input[type="radio"]:checked+label{ background-color: #FFFF00; } ​

<div class="same-line">
    <input type="checkbox" id="checkbox1" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label for="checkbox1">
    Jornadas de género (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div> 
<div class="same-line">
    <input type="checkbox" id="checkbox2" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label for="checkbox2">
    Curso de fotografía (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div>

.same-line input[type='checkbox'] {
    display:none;
}

.same-line label {
    display:inline-block;
        font-size: 12.2pt;
    background-color:#fff;
}

.same-line input[type='checkbox']:checked + label {
   background-color: #ddd;
}