Currently, I am in the process of developing an MVC3 application and my goal is to style the checkbox label.
With ASP MVC3, there are helper methods that assist in creating parts of the code. The code for a checkbox typically appears 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>
I initially attempted to customize the label using the following CSS code:
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;
}
However, this approach did not yield the desired results. It seems that the label and input elements need to be adjacent to each other for it to work properly.
If anyone has encountered a similar issue before and found a solution, I would greatly appreciate your insights on resolving this problem.