Question

I’m developing a MVC3 application and need to select the checkboxes label.

In ASP MVC3 you have helper methods which creat a part of the code. So the code for a checkbox looks like this:

<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>

Now I’ve thought I can use following code to select the 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;
}

But it does not work. It looks like label and input have to be next to each other.

Does any ony have a solution how to solve this problem?

Answer 1

There is no CSS selector that can be used to select the target of a <label for="#"> element universally. The + selector is the “adjacent sibling” selector.

There are a few workarounds:

• Put the <input> element directly within the <label> element (you won’t need the for="" attribute, that way).
• Seeing as each <input /> needs to have a unique id="" attribute set in order to use <label for="">, just select the checkboxes by their IDs in the stylesheet.
• Assign classes for each of the appropriate inputs.
• Create wrappers around each input and its label.