Add support for input tags inside label tags

[nickclyde]

Building on #72 by @enumag, I've added selectors for input tags that are inside the label tags, while still retaining support for the other method as well. The one caveat is that the actual label text needs to be inside span tags. I've updated the LESS, SCSS, and CSS files, as well as the README to reflect the new changes.

[enumag]

@ClydeDroid Awesome! 👍 I'm closing my PR in favor of this one.

[enumag]

Actually what is the reason for the necessary span? My PR didn't require that.

[nickclyde]

The span is necessary so that styles can be applied separately to the input element and the label text, which is contained in the span. If the label text is in the input tags, styles on the input will apply to the label text as well.

[enumag]

I see now. In that case this is different from my pull request. My problem is that the checkboxes inside labels currently don't work at all. I just wanted to fix their function, not their styles.

[nickclyde]

Actually, I wanted to correct the function as well; and it seems to work in my case. Do checkboxes still not work for you when using my CSS file?

[enumag]

Not without the <span> tag.

[siebeclaes]

Hi, thanks for this updated version. It works great for me in combination with django and bootstrap. The only problem was that the new checkbox is not properly aligned. I fixed it by doing this:

.checkbox label > span { display: inline-block; vertical-align: top; position: relative; padding-left: 0px; }

Note the edited vertical-align and padding-left values

[Oxicode]

+1