4

I am using this reference to create some styled checkboxes. It refers to using the + selector to get the label following the checkbox:

input[type="checkbox"]{}
input[type="checkbox"] + label {}

When the html is:

<input type="checkbox" />
<label>Label</label>

However, I am using MVC and Razor. When I use the following helpers:

@Html.CheckBox(...)
@Html.Label(...)

The following html is produced (as detailed in this SO question):

<input type="checkbox" />
<input type="hidden" />
<label></label>

An additional hidden input is produced between the checkbox and the input. This prevents the + selector in the CSS from finding the label as it is no longer the next element to the checkbox. How can I select the label in this scenario?

Community
  • 1
  • 1
tallpaul
  • 1,220
  • 2
  • 13
  • 35

1 Answers1

1

Use like this:

input[type="checkbox"] + input[type="hidden"] + label {}

Or if you want to target any element following after checkbox is then you may use the following:

input[type="checkbox"] + * + label {}
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231