css Checkbox Label Selector
asp.net, asp.net-mvc-3, css, css-selectors
Solution
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.
Problem
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?