Aligning Label and then sub labels

HTML & CSS
1

In case of checkboxes, I want to display the label checkboxes as follows:

image

Here’s my JS fiddle:

2

Like this?

3 Likes
3

Yes, exactly. Thanks!

2 Likes
4

One thing I noticed is that I have a few more labels in my code (not included in the JSfiddle above) which have input text fields and Select so this code isn’t working there. Is there any another way where the solution is independent of label:first-of-type ?

5

There are tons of ways to do that, but we need to see your HTML. It would be good if you could make up a Pen like @Archibald did. As a guess, somethig like this might work, but it’s a guess:

.checkboxes > * {
  display: block;
  margin-left: 20px;
}
6

I used CSS selectors .checkboxes label and .checkboxes label:first-of-type so only labels within the <div> element which has class ‘checkboxes’ will be styled by that CSS. Only those four labels and their input elements should be within that <div> element.

With regard to your JSFiddle, you may like to note that each input element should be within its respective label element or you should use the ‘for’ attribute (reference). Also the checkboxes should have unique names (radio buttons can have the same name).

2 Likes
7

Thanks I will consider using for in my final code. I was confused but it is working fine as shown in the JSFiddle I posted in a separate question here. Decided to post a different question since the my question is different than this post.

8

Thanks. It’s working fine in the fiddle as I described in my another question. More details on the above comment

9

That can help users of screen reading assistive technology.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.