CSS selector for 'next but one' element, checkboxes & labels in MVC forms

Question

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?

Bhojendra Rauniyar · Accepted Answer · 2015-09-15 11:54:20Z

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

edited Sep 15, 2015 at 11:54

answered Sep 15, 2015 at 11:35

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bhojendra Rauniyar Over a year ago

not all labels? OP wants to select all labels there after?

Collectives™ on Stack Overflow

CSS selector for 'next but one' element, checkboxes & labels in MVC forms

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related