css复选框标签选择器

Question

我正在开发一个MVC3应用程序，需要选择checkboxes标签。

在ASP MVC3中，您有辅助方法来创建代码的一部分。所以checkbox的代码如下所示：

<input id="Jumping_successleicht" type="checkbox" value="true" name="Jumping_successleicht">
<input type="hidden" value="false" name="Jumping_successleicht">
<label for="Jumping_successleicht">
<span>leicht (4)</span>
</label>

现在我想我可以使用以下代码来选择label：

input[type=checkbox] + label {
    background: url("../../Images/Controls/Checkbox.png") no-repeat scroll left center transparent;
    clear: none;
    cursor: pointer;
    margin: 0;
    padding: 5px 0 4px 24px;
}

但它不起作用。看起来label和input必须彼此相邻。

有没有解决方法如何解决这个问题？

Answer 1

没有CSS选择器可用于普遍选择<label for="#">元素的目标。 +选择器是“相邻兄弟”选择器。

有一些解决方法：

• 将<input>元素直接放在<label>元素中（这样就不需要for=""属性。）
• 看到每个<input />需要设置唯一的id=""属性才能使用<label for="">，只需在样式表中按ID选择复选框。
• 为每个适当的输入分配类。
• 围绕每个输入及其标签创建包装。

Answer 2

也许你可以试试这个？

        input[type="checkbox"] + label{
            background-color:red;
        }